How to filter and paginate articles or products by conditions in the document list label `archiveList`?

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

Flexible content retrieval: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 document list it retrieves toarchivesVariable.type="list"It means we want to get a simple list, andlimit="10"It limited the display quantity to 10 items.forIn the loop, we can easily accessitemvarious properties of the object, such asTitle(Title),Link(Link),Description(Introduction) as well asCreatedTime(Creation time) etc. If the list is empty,{% empty %}The content in the block will be displayed, avoiding a blank page.

Refined filtering, accurate positioning of target content.

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

  1. Filter by content model (moduleId)If your website has different content types such as articles and products (in Anqicms called "content model"), you can specify only one type of content throughmoduleIdparameters. For example,moduleId="1"usually used to get a list of articles, andmoduleId="2"may be used to get a list of products, depending on the model settings on the back-end.

  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 of the category with ID 1.
    • categoryId="1,2,3"：Show the content of the categories with IDs 1, 2, 3.
    • excludeCategoryId="4"：Exclude the content of the category with 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.
    • A particularly useful trick is, if you use it in the category list pagearchiveListbut not specifycategoryIdIt will automatically read the category ID of the current page. If you do not want it to read automatically, you can set it explicitlycategoryId="0".

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

  4. Search by keyword (q)When you are making 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=关键词query parameters,archiveListThe label will automatically read and apply this search condition, making it very convenient to build search functions.

  5. Display by sorting method (order)The sorting of content can significantly affect the efficiency of users obtaining information.orderThe parameter provides multiple sorting options:

    • 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": Sort in reverse order according to the custom sorting field set in the background.

  6. Custom Filter ParameterThe AnQi CMS allows you to add custom fields to the content model.If these fields are set to be filterable, then you can perform advanced filtering through query parameters in the URL.For example, if your product model has a "color" field, you can add it to the URL bycolor=红色to filter out all red products. This usually requires coordination witharchiveFilterstags to generate these filter links.

  7. multi-site and special combinations (siteId,combineId,combineFromId)If you are using the multi-site management feature of Anqi CMS,siteIdit can help you get the content of the specified site. AndcombineIdandcombineFromIdThis is a more advanced usage, used to combine two content items in a list, generating a new title and link. This is very useful when building comparison pages or complex recommendation logic.

Elegantly present: Implement content pagination

When there is a large amount of content, pagination is the key to maintaining page tidiness and improving loading speedarchiveListwith the tag andpaginationTags combined can easily implement pagination functionality

First, you need toarchiveListoftypethe parameter to"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"Defined to display 10 items per page.pagination pages with show="5"Then, a pagination navigation will be generated, whereshow="5"Indicates that up to 5 page number buttons can be displayed.pagesAn object contains all the information related to pagination, such as total number of pages (TotalPages), current page (CurrentPage), first page link (FirstPage), last page link (LastPage) Previous page (PrevPage) and next page (NextPage) and the array of all visible page numbers (Pages) through a looppages.PagesWe can build a complete and clickable page navigation.

Summary

archiveListThe tag is an