In website content management, whether it is to display a large number of articles, products, or documents under categories, an efficient and user-friendly pagination feature is crucial.It not only allows users to easily browse a large amount of content, avoiding the slow loading caused by excessively long pages, but also helps search engines better crawl and index website information.AnQiCMS (AnQiCMS) is well-versed in this field, providing an intuitive and powerful pagination feature in template tag design, making it easy to implement pagination display in article lists or Tag document lists.

To understand how AnQiCMS implements pagination, we need to focus on three core template tags:archiveList(used for article lists),tagDataList(used for Tag document lists) as well aspagination（Used for generating pagination navigation）. They work together to build a complete pagination experience.

I. Pagination display of article list

For the most common article (or product) list on the website, AnQiCMS achieves this througharchiveListtags to obtain content. The key to enabling pagination is in thetypeparameter settings.

when we want toarchiveListWhen the label returns paginated data instead of a simple list,typeparameter settings"page"at the same time,limitThe parameter is no longer a limit on the total number of items at this time, but defines the number of articles displayed per page. For example, if we want to display 10 articles per page, we can call it like this:

{% archiveList archives with type="page" limit="10" %}
    {# 在这里循环显示当前页的文章内容 #}
    {% for item in archives %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
{% endarchiveList %}

OncearchiveListlabels totype="page"模式被调用，AnQiCMS系统就会自动处理当前页码的逻辑，并准备好所有分页所需的数据。接下来，我们就可以使用EnglishpaginationLabels to render pagination navigation.

paginationTags are usually followed byarchiveListLabels after, and pass a variable (usually named here)pagesThis variable includes all the information related to pagination, such as the total number of items, total number of pages, current page number, home page link, previous page link, next page link, last page link, and the list of middle page numbers.showThe parameter allows us to control the number of middle page links displayed, for example,show="5"indicating that up to 5 middle page numbers are displayed.

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        {# 显示总页数和当前页 #}
        <li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
        {# 首页链接 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
        {# 上一页链接 #}
        {% if pages.PrevPage %}
            <li class="page-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
        {% endif %}
        {# 中间页码链接列表 #}
        {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
        {# 下一页链接 #}
        {% if pages.NextPage %}
            <li class="page-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
        {% endif %}
        {# 末页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
    </ul>
    {% endpagination %}
</div>

Through the above combination, we can see a functionally complete article list pagination navigation on the front end of the website. In addition,archiveListIt also supportsmoduleId[Specify Content Model)]categoryId(specified category),order（Sort method）等多种参数，可以在获取列表数据时进行更精细的筛选和排序，这些筛选条件在分页模式下依然有效。如果URL中包含搜索关键词q,archiveListIntype="page"The search function will also be automatically read and applied.

II. Pagination display of Tag document list.

Similar to the article list, when we need to display the document list under a specific Tag and implement pagination, we can usetagDataListTags. Its pagination logic is consistent witharchiveListthe height.

tagDataListLabel also needs to be set.typeparameter settings"page"To enable pagination mode.limitThe parameter defines the number of Tag documents displayed per page. In addition,tagIdThe parameter specifies which Tag's documents need to be retrieved.

{% tagDataList archives with type="page" limit="10" %}
    {# 在这里循环显示当前页的Tag文档内容 #}
    {% for item in archives %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
{% endtagDataList %}

Following, it is the same as usingpaginationTags to build the pagination navigation of the Tag document list, its usage is completely the same as the article list pagination.

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        {# 分页导航结构与文章列表分页示例一致 #}
        {# ... （省略具体代码，同上） ... #}
    </ul>
    {% endpagination %}
</div>

tagDataListit also supportsmoduleIdandorderParameters such as these can be used to more flexibly control the display content and order of the Tag document list.

Section 3: Flexible Customization and Precautions

The pagination function of AnQiCMS is designed to be very flexible, template developers can adjust the style of pagination links as needed. Due topaginationThe label only provides data structure and links, the actual HTML structure and CSS style are freely defined by developers in the template, which means you can completely control the appearance and layout of the pagination buttons, making them perfectly integrate into the overall design of the website.

It is worth mentioning that when configuring pseudo-static rules, AnQiCMS will automatically adapt the URL structure of pagination links, without the need for additional complicated configuration for pagination rules.paginationTagsprefixThe parameter allows for advanced customization of pagination URL patterns, but in most cases, the automatic adaptation provided by the system is sufficient.

In general, AnQiCMS provides a comprehensive pagination solution for content lists and Tag document lists through concise and powerful template tags.The developer only needs to understand the usage of a few core tags to quickly implement an efficient and beautiful pagination function, greatly enhancing the user experience and management efficiency of the website.

Common Questions (FAQ)

1. Why isn't the pagination link displayed in my article or Tag document list?

This is usually due toarchiveListortagDataListnot passing intypeparameter settings"page"or not properly including in the templatepaginationLabel to render pagination navigation. Make sure your tag calls includetype="page", and there is an addition at the end of the list loop{% pagination pages with show="5" %}...{% endpagination %}such code to display pagination links.

2. How to customize the style and layout of pagination links?

AnQiCMSpaginationTags are responsible for providing pagination data and generating the corresponding URL. They do not generate any built-in CSS styles. You can adjust them as needed,{% pagination pages with show="5" %}...{% endpagination %}Labels inside, fully customize the style and layout of pagination using HTML and CSS. For example, you can wrap each page number link in<li>Tags within, then beautify them with CSS, or use flexbox layout to control the arrangement of pagination buttons.

3. Besides the article and Tag list, where else can AnQiCMS pagination be used?

The design philosophy of AnQiCMS is generalization, so in addition to the article and Tag document lists, similar pagination mechanisms can also be applied to other places that need to display lists and may contain a lot of content. For example, the comment list (commentListLabel) also supportstype="page"Parameters, can be combined withpaginationLabel to implement pagination of comment content, to avoid the page being too long due to too many comments on a single article page.