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

In AnQiCMS, it is a core requirement of website content management to flexibly display article lists on the website page.Whether it is to build news updates, product displays, blog articles, or any other content that requires a list display, AnQiCMS' powerful template tag system can help you easily achieve it.This article will introduce how to usearchiveListTemplate tags, combined with the various functions of AnQiCMS, can efficiently and beautifully present the article list on your website page.

UnderstandingarchiveList: The core tag of the article list

archiveListIt is 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 present article content based on different requirements such as by category, model, recommended attributes, even by keyword search conditions.

While 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 work with{% for item in 变量名 %}Loop tags to iterate and display the detailed information of each article. For example, the basic structure of an article list call may 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 we define for the article list data, you can also name it according to your habits.type="list"Indicates that we want to get a normal article list,limit="10"limits it to only displaying the latest 10 articles.{% empty %}The tag is inforvery useful in the loop, whenarchivesWhen the list is empty, it will display a prompt indicating that 'there is no article content at the moment', 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. moduleId: Specify the content model.AnQiCMS supports custom content models, such as article models, product models, etc. ThroughmoduleIdparameters, you can specify which content model to retrieve articles from. For example,moduleId="1"Generally used to obtain default article model content,moduleId="2"Content that may be used to obtain product models.

   {# 获取产品模型下的最新10条数据 #}
   {% archiveList products with moduleId="2" type="list" limit="10" %}
       {# ... 循环展示产品信息 ... #}
   {% endarchiveList %}
   

2. categoryId: Filter articles by categoryIf you only want to display articles under a specific category, you can usecategoryIdparameters. You can specify a single category ID (such ascategoryId="1")，can also specify multiple category IDs (such ascategoryId="1,2,3")。If you want to get the articles of the category on the current page, you usually can omitcategoryIdParameters, AnQiCMS will automatically recognize. To explicitly set not to 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 displays 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") to get the first 10. More advanced usage is to useoffset,limitthe format, for examplelimit="5,10"Indicates 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 skipping N data.

   {# 跳过前2条，获取接下来的5条文章 #}
   {% archiveList recentArticles with type="list" limit="2,5" %}
       {# ... 循环展示文章 ... #}
   {% endarchiveList %}
   

4. typeList type (normal list, paginated list, related articles) typeThe parameter isarchiveListA very critical option:

   • type="list"(Default): Get a fixed number of article lists without pagination information.
   • type="page": Used to generate article lists with pagination features. When set totype="page", it usually needs to be combined withpaginationTags 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, and AnQiCMS will intelligently recommend related articles based on the category or keywords of the current article.

   {# 结合分页标签展示文章列表 #}
   {% 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 useorderParameters to define the sorting rules of the article list. Common sorting methods include:

   • order="id desc": Sort by article ID in reverse order (newest first).
   • order="views desc"：Sort by views in reverse order (most popular).
   • order="sort desc": Sort by the custom sorting field in the background in reverse order.
   • order="CreatedTime desc": Sort by creation time in descending order.

   {# 获取浏览量最高的5篇文章 #}
   {% archiveList hotArticles with type="list" limit="5" order="views desc" %}
       {# ... 循环展示文章 ... #}
   {% endarchiveList %}
   

6. flag: Filter by recommended propertiesWhen publishing articles on the AnQiCMS backend, you can set various recommendation attributes for the articles (such as headlines[h], recommendations[c], sliders[f], etc.). ThroughflagParameters, 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 %}
   

Get the details of the article in the loop.

InarchiveListwithin the tag,forthe loop,itemThe variable represents each article being traversed. You canitem.字段名to get various properties of the article:

• item.Id: Article ID
• item.Title: Article title
• item.Link: Article detail page link
• item.Description: Article summary
• item.CreatedTime: Article publish time (timestamp format, needs to be usedstampToDateFormat
• item.Views: Article views
• item.Thumb/item.Logo: Article thumbnail/cover image link
• item.CategoryId: Article category ID

Formatted datedue toCreatedTimeThe timestamp field is, we need to usestampToDateauxiliary labels to format it as a readable date string. For example:{{ stampToDate(item.CreatedTime, "2006年01月02日 15:04") }}

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