How to use AnQiCMS template tags to display article lists on a page?

In AnQiCMS, flexibly displaying the article list on the website pages is one of the core needs of website content management.Whether it is building news dynamics, product showcases, blog articles, or any other content that requires list presentation, AnQiCMS' powerful template tag system can help you easily achieve it.archiveListTemplate tags, combined with the various functions of AnQiCMS, efficiently and beautifully present article lists on your website pages.

UnderstandingarchiveList: The core tag of the article list.

archiveListis the core template tag used in AnQiCMS to retrieve and display article list data.Its design aims to provide high flexibility, allowing you to filter and display article content according to different needs, such as by category, model, recommended attributes, or even keywords.

When usingarchiveListWhen labeling, you need to wrap it in a{% archiveList ... %}and{% endarchiveList %}structure. The article data obtained is usually a collection (array), so we also need to coordinate{% for item in 变量名 %}Loop tags to iterate through and display the details of each article. For example, the basic structure of the article list call might look like this:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </li>
    {% empty %}
        <li>当前没有文章内容。</li>
    {% endfor %}
{% endarchiveList %}

In the above example,archivesIt is the variable name defined for the article list data, you can also name it according to your habits.type="list"represents the ordinary article list we want to getlimit="10"It limits to only displaying the latest 10 articles.{% empty %}Tags inforvery useful in the loop,archivesThe list is empty, it will display the prompt “There is no article content currently” to avoid the page from appearing blank.

archiveListcommon parameters and flexible configuration

archiveListTags provide rich parameters, allowing you to finely control the display content of the article list. The following are some commonly used parameters and their application scenarios:

  1. moduleIdSpecify the content modelAnQiCMS supports custom content models, such as article models, product models, etc. BymoduleIdparameters, you can specify which content model to obtain articles from. For example,moduleId="1"Generally used to get the default article model content.moduleId="2"May be used to get the product model content.

    {# 获取产品模型下的最新10条数据 #}
    {% archiveList products with moduleId="2" type="list" limit="10" %}
        {# ... 循环展示产品信息 ... #}
    {% endarchiveList %}
    
  2. categoryId: Filter articles by category.If you only want to display articles under a specific category, you can usecategoryIdParameters. You can specify a single category ID (such ascategoryId="1"), or multiple category IDs (such ascategoryId="1,2,3"). If you want to get the articles of the current category on the page, you can usually omitcategoryId参数,AnQiCMS will automatically recognize. If you want to explicitly not filter based on the current category, you can set it tocategoryId="0".

    {# 获取分类ID为5的文章列表 #}
    {% archiveList articles with categoryId="5" type="list" limit="5" %}
        {# ... 循环展示文章 ... #}
    {% endarchiveList %}
    
  3. limit:Control the number of displayed items and pagination offset limitThe parameter is used to control the number of articles displayed in the list. You can directly specify a number (such aslimit="10"), indicating to get the first 10. More advanced usage is to useoffset,limitformat, for examplelimit="5,10"This represents starting from the 6th article (skipping the first 5), and getting the next 10 articles. This is very useful when building 'More Recommendations' or when it is necessary to skip N articles.

    {# 跳过前2条,获取接下来的5条文章 #}
    {% archiveList recentArticles with type="list" limit="2,5" %}
        {# ... 循环展示文章 ... #}
    {% endarchiveList %}
    
  4. type:List type (normal list, paginated list, related articles) typeParameter isarchiveListA very critical option in Chinese:

    • type="list"(默认值): 获取一个固定数量的文章列表,不包含分页信息。
    • type="page": 用于生成带分页功能的文章列表。当设置为type="page"时,通常需要结合paginationLabel to render page navigation.
    • type="related": Used to retrieve articles related to the current article.This parameter is usually used on the article detail page, AnQiCMS will intelligently recommend related articles based on the current article's category or keywords.
    {# 结合分页标签展示文章列表 #}
    {% archiveList paginatedArticles with type="page" limit="10" %}
        {# ... 循环展示文章 ... #}
    {% endarchiveList %}
    
    
    {# 渲染分页导航 #}
    {% pagination pages with show="5" %}
        {# 具体的页码链接渲染逻辑,例如首页、上一页、中间页、下一页、末页 #}
        {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
        {% for item in pages.Pages %}<a href="{{ item.Link }}">{{ item.Name }}</a>{% endfor %}
        {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
    {% endpagination %}
    
  5. order: Specify the sorting methodYou can useorderParameter to define the sorting rules for the article list. Common sorting methods include:

    • order="id desc": Sort by article ID in descending order (newest first).
    • order="views desc":By view count in descending order (most popular).
    • order="sort desc":By custom sorting field in descending order on the backend.
    • order="CreatedTime desc":By creation time in descending order.
    {# 获取浏览量最高的5篇文章 #}
    {% archiveList hotArticles with type="list" limit="5" order="views desc" %}
        {# ... 循环展示文章 ... #}
    {% endarchiveList %}
    
  6. flag:By recommended attribute filteringWhen publishing articles in the AnQiCMS backend, you can set various recommended attributes for the articles (such as头条[h], 推荐[c], 幻灯[f], etc.). ThroughflagParameter, you can filter out articles with specific recommendation attributes. For example,flag="h"Only articles marked as headlines will be displayed.

    {# 获取所有被标记为幻灯(f)的文章 #}
    {% archiveList slides with type="list" limit="5" flag="f" %}
        <img src="{{ item.Logo }}" alt="{{ item.Title }}">
        <h3>{{ item.Title }}</h3>
    {% endarchiveList %}
    

To get the details of the article in the loop

InarchiveListWithin the tags,forin the loop,itemThe variable represents the current article being traversed. You can obtain various attributes of the article:item.字段名in this way.

  • item.Id: Article ID
  • item.Title: Article title
  • item.Link: The article detail page link
  • item.Description: Article summary
  • item.CreatedTime: 文章发布时间(时间戳格式,需要用English)stampToDateformatted)
  • item.Views: 文章浏览量
  • item.Thumb/item.Logo: 文章缩略图/封面图链接
  • item.CategoryId: 文章所属分类ID

格式化日期Due toCreatedTimeThe time field is a timestamp, and we need to usestampToDateauxiliary labels to format it into a readable date string. For example:{{ stampToDate(item.CreatedTime, "2006年01月02日 15:04") }}

to get the category and label informationIn the article list, you may also want to display the category name or associated tags of each article. This can be achieved by combiningcategoryDetailand