In the Anqi CMS,archiveListThe tag is undoubtedly a core tool for content display, providing great flexibility and control for the website's content list. Whether you want to display the latest articles on the homepage or implement complex filtering and pagination on the category page,archiveListCan be accurately presented through its rich parameter configuration.接下来，我们就一起深入探讨如何利用这个标签来控制文档列表的显示数量、排序方式以及实现精妙的分页逻辑。

Control the number of documents displayed:limitFlexible use of parameters

When building web pages, we often need to control the length of the content list.For example, on the homepage of the website, you may only want to display the latest 5 articles; in the sidebar, perhaps you only want to show the top 10 products.archiveListTagged throughlimitParameters, giving us the ability to accurately control the display quantity.

The most common usage is to specify a number directly, indicating the number of documents to retrieve. For example, if you want to display the most recent 8 articles at a certain location:

{% archiveList latestArticles with type="list" limit="8" %}
    {% for item in latestArticles %}
        <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
    {% empty %}
        <li>暂无文章可显示。</li>
    {% endfor %}
{% endarchiveList %}

Here,limit="8"Ensure that the list displays a maximum of 8 articles.

limitThe parameter also supports a more advanced "offset" mode, which starts from a certain position in the result set and then retrieves a specified number of documents.This is very useful for scenarios where you need to skip the first few items (such as after the top recommended articles show the regular list)."起始偏移量,获取数量"For example, if you want to skip the first 2 articles and start displaying from the 3rd article, show 5 articles:

{% archiveList featuredArticles with type="list" limit="2,5" %}
    {% for item in featuredArticles %}
        <li><a href="{{ item.Link }}">{{ item.Title }}</a> - 从第三篇开始的第{{ forloop.Counter }}篇</li>
    {% empty %}
        <li>暂无文章可显示。</li>
    {% endfor %}
{% endarchiveList %}

This configuration allows for more refined content display, meeting various layout requirements.

Customize the content sorting method:orderStrategy selection of parameters

The order of content presentation is crucial for user experience and information delivery.archiveListTagged throughorderParameters allow you to flexibly define the sorting method of the document to highlight the most important information.

orderThe parameter accepts a string that includes the field to be sorted and the sorting direction (ascfor ascending,descfor descending). Common sorting fields include:

  • id descThis is typically displayed from the most recent to the oldest in terms of publication time.
  • views desc: Sort by document views in descending order, which helps us display the most popular or trending content.
  • sort descEnglish: According to the sorting field customized in the background in descending order. If the background has set a manual sorting weight for the document, this option will be very practical.

For example, if you want to display the top 5 most read articles in the sidebar:

<div class="sidebar-hot-articles">
    <h3>热门文章</h3>
    <ul>
    {% archiveList hotArticles with type="list" order="views desc" limit="5" %}
        {% for item in hotArticles %}
            <li><a href="{{ item.Link }}">{{ item.Title }} <small>({{ item.Views }} 阅读)</small></a></li>
        {% empty %}
            <li>暂无热门文章。</li>
        {% endfor %}
    {% endarchiveList %}
    </ul>
</div>

And if you want to show the latest content on the category page, you can use it like this:

<div class="category-new-list">
    <h2>最新发布</h2>
    <ul>
    {% archiveList newArrivals with type="list" order="id desc" limit="10" %}
        {% for item in newArrivals %}
            <li><a href="{{ item.Link }}">{{ item.Title }}</a> - 发布于 {{ stampToDate(item.CreatedTime, "2006-01-02") }}</li>
        {% empty %}
            <li>此分类暂无最新文章。</li>
        {% endfor %}
    {% endarchiveList %}
    </ul>
</div>

By cleverly matchingorderParameters, we can make the content of the website always displayed to the user in the most reasonable and attractive way.

Implement content pagination logic:type="page"WithpaginationTag联动

When the amount of website content is large, pagination is indispensable, which can effectively improve the loading speed of the page and the user browsing experience. In the Anqi CMS, pagination needs to be implementedarchiveListTags andpaginationThe clever combination of tags.

Firstly,archiveListIn the tags, we need to.typeparameter settings"page". This will tell the system that we want to retrieve a paged document list, not a fixed-length list. At this time,limitThe parameter will be used to define the number of documents displayed per page.

For example, to display 10 articles per page on the article list page:

{% archiveList articles with type="page" limit="10" %}
    <div class="article-list">
        {% for item in articles %}
            <article>
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p>{{ item.Description }}</p>
                <span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            </article>
        {% empty %}
            <p>此列表暂无内容。</p>
        {% endfor %}
    </div>
{% endarchiveList %}

仅仅这样设置，页面并不会自动出现页码导航。此时，就需要pagination标签登场了。pagination标签会读取archiveListReady pagination data, and generate actual page navigation links. It is usually placed.archiveListBelow the label, and wrapped in a.{% pagination pages with show="5" %}...{% endpagination %}Structure. Among,show="5"The maximum number of page buttons displayed is 5 (e.g., 1, 2, 3, 4, 5).

The following is an example of a complete pagination list with page number navigation:

{# 假设这是文章列表页模板 #}
<div class="main-content">
    {% archiveList articles with type="page" limit="10" order="id desc" %}
        <div class="article-list">
            {% for item in articles %}
                <article>
                    <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                    <p>{{ item.Description }}</p>
                    <span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                </article>
            {% empty %}
                <p>此列表暂无内容。</p>
            {% endfor %}
        </div>

        {# 分页导航区域 #}
        <div class="pagination-nav">
            {% pagination pages with show="5" %}
                <ul>
                    {# 首页按钮 #}
                    <li {% if pages.FirstPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a></li>
                    
                    {# 上一页按钮 #}
                    {% if pages.PrevPage %}
                        <li><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a></li>
                    {% endif %}

                    {# 中间页码按钮组 #}
                    {% for pageItem in pages.Pages %}
                        <li {% if pageItem.IsCurrent %}class="active"{% endif %}><a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a></li>
                    {% endfor %}

                    {# 下一页按钮 #}
                    {% if pages.NextPage %}
                        <li><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>
                    {% endif %}
                    
                    {# 尾页按钮 #}
                    <li {% if pages.LastPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a></li>
                    
                    <li class="info">总数：{{ pages.TotalItems }}条，共：{{ pages.TotalPages }}页，当前第{{ pages.CurrentPage }}页</li>
                </ul>
            {% endpagination %}
        </div>
    {% endarchiveList %}
</div>

In this example,pagesThe variable contains all information related to pagination, such as the current page number,pages.CurrentPagetotal number of pages,pages.TotalPageslink to the previous page,pages.PrevPage.Link) and a series of middle page number buttons,pages.Pages). By traversingpages.Pages，we can generate a complete page navigation bar.

It is worth mentioning that whentype="page"enabled,archiveListit will also automatically identify the URLs inqParameters