How to filter and paginate articles or products with the document list tag `archiveList`?

In the Anqi CMS, when we want to display a series of articles, products, or other content on the website page,archiveListTags are an indispensable powerful tool.It not only helps us flexibly extract and display various content, but also allows for precise filtering based on multiple conditions, and elegantly implements content pagination, thereby greatly enhancing the user's browsing experience and the website's information organization efficiency.

Flexibly retrieve content:archiveListBasic Usage

archiveListThe core function of the tag is to retrieve the specified content list. The simplest way to use it is like this:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <a href="{{item.Link}}">
                <h3>{{item.Title}}</h3>
                <p>{{item.Description}}</p>
                <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            </a>
        </div>
    {% empty %}
        <p>当前没有任何内容可显示。</p>
    {% endfor %}
{% endarchiveList %}

Here, we usearchiveListThe tag assigns the list of documents retrieved toarchivesa variable.type="list"indicates that we want to get a simple list,limit="10"Then it limits the display quantity to 10 items. Inforthe loop, we can easily accessitemthe various properties of the object, such asTitle(Title),Link(Link),Description(Introduction) as well asCreatedTime(Creation Time) and so on. If the list is empty,{% empty %}The content within the block will be displayed, avoiding a blank page.

Refine filtering, accurately locate target content

archiveListThe true strength of tags lies in their rich filtering parameters, which can help us precisely control what content is displayed: English

  1. Filter by content model (moduleId)If your website has different content types such as articles and products (in AnQi CMS referred to as "content models"), you can specify to display only one type of content using parameters. For example,moduleId参数来指定只显示某一类内容。例如，moduleId="1"通常用于获取文章列表，而moduleId="2"可能用于获取产品列表，具体取决于你在后台的模型设置。

  2. Filter by category (categoryId,excludeCategoryId,child)This is one of the most commonly used filtering methods. You can specify one or more category IDs (separated by commas) to display content under specific categories.

    • categoryId="1"：Only show the content under category ID 1.
    • categoryId="1,2,3"：Show the content under category IDs 1, 2, 3.
    • excludeCategoryId="4"：Exclude the content under category ID 4.
    • By default,archiveListThe content will automatically include subcategories. If you only want to display the content of the current specified category and not include its subcategories, you can addchild=false.
    • An especially useful trick is that if you are usingarchiveListbut not specifycategoryIdIt will automatically read the current page's category ID. If you do not want it to read automatically, you can explicitly setcategoryId="0".

  3. Filter by recommended attributes (}flag,excludeFlag)When publishing articles or products in the background, we can set them with recommended attributes such as 'Headline', 'Recommend', 'Slideshow', etc.flagParameters, you can easily call this content marked specially. For example,flag="c"It can be used to display all articles marked as "Recommended".excludeFlag="h"It can exclude all "Headline" content.

  4. Search by keyword (q)When you are creating the search results page,qThe parameter is particularly important. It allows you to filter content titles based on the keywords entered by the user. If your URL already containsq=关键词such a query parameter,archiveListLabels will automatically read and apply this search condition, making it very convenient to build search functionality.

  5. Display by sorting method (order)The sorting of content can significantly affect the efficiency of users in obtaining information.order参数提供了多种排序方式：English

    • order="id desc": Sort by content ID in descending order (the most recently published content first).
    • order="views desc": Sort by view count in descending order (popular content first).
    • order="sort desc"：The list is sorted in reverse order according to the custom sorting field set in the background.

  6. Custom filter parametersThe AutoCMS allows you to add custom fields to content models.If these fields are set to filterable, you can perform advanced filtering through the query parameters in the URL.color=红色来筛选出所有红色的产品。这通常需要配合EnglisharchiveFilters标签来生成这些筛选链接。English

  7. 多站点与特殊组合 (EnglishsiteId,combineId,combineFromId)If you are using the multi-site management feature of AnQi CMS,siteIdit can help you obtain the content of the specified site.combineIdandcombineFromIdThis is a more advanced usage, used to combine two contents in a list to display them together, generating new titles and links. This is very useful when building comparison pages or complex recommendation logic.

Elegant Presentation: Implement Content Pagination

Pagination is the key to maintaining page tidiness and improving loading speed when the content is massive.archiveListTags andpaginationTags combined can easily implement pagination functionality.

Firstly, you need to.archiveListoftypeparameter settings"page":

{% archiveList archives with type="page" limit="10" categoryId="1" order="id desc" %}
    {% for item in archives %}
        <div class="product-card">
            <a href="{{item.Link}}">
                <img src="{{item.Thumb}}" alt="{{item.Title}}">
                <h3>{{item.Title}}</h3>
                <p>浏览量：{{item.Views}}</p>
            </a>
        </div>
    {% empty %}
        <p>此分类下暂无产品。</p>
    {% endfor %}
{% endarchiveList %}

{# 分页代码将紧随其后 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 首页链接 #}
        <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页链接 #}
        {% if pages.PrevPage %}
        <a class="page-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间页码链接 #}
        {% for pageItem in pages.Pages %}
        <a class="page-link {% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {# 下一页链接 #}
        {% if pages.NextPage %}
        <a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        {% endif %}
        {# 末页链接 #}
        <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
    {% endpagination %}
</div>

In this example,limit="10"It defines displaying 10 items per page.pagination pages with show="5"Then, a pagination navigation will be generated, where.show="5"indicates that up to 5 page number buttons are displayed.pagesThe object contains all information related to pagination, such as total pages (TotalPages), current page (CurrentPage)、home page link (FirstPage), last page link (LastPage)、上一页 (English)PrevPage) and next page (NextPage)，and all visible page numbers array (Pages). Through the looppages.PagesWe can construct a complete and clickable page navigation.

Summary

archiveListTag is an