How to implement pagination display for the document list with `pagination` tag?

As an experienced website operations expert, I know that an efficient content management system (CMS) plays a foundational role in website operations.AnQiCMS boasts its concise and efficient architecture and rich features, performing excellently in content publishing and management.Today, let's delve deeply into a seemingly simple yet extremely important feature of AnQiCMS -paginationHow a tag can elegantly implement pagination of document lists, thereby optimizing user experience and enhancing website performance.

AnQiCMS Deep Guide to Pagination Function: Skillfully UtilizedpaginationTag implementation for document list pagination

In content management, when the list content such as articles, products, or comments increases, if there is no effective pagination mechanism, users will face the problem of information overload, and the website loading speed will also be affected. AnQiCMS understands this well and provides a set of intuitive and flexible pagination solutions, the core of which is its powerfulpagination.

Understand the pagination mechanism of AnQiCMS:paginationCollaboration with list tags

Firstly, we need to make it clear that:paginationThe tag does not operate independently, it always collaborates closely with the tags used in AnQiCMS to obtain content lists, for examplearchiveList(Document list),commentList(Comment list) ortagDataList(Tag document list). When you set the parameters in these list tags,type="page"AnQiCMS will automatically prepare the data needed for pagination of the current list. At the same time,limitThe parameter allows you to precisely control the number of documents displayed per page. For example,{% archiveList archives with type="page" limit="10" %}This code will not only retrieve the first 10 documents but also prepare the pagination information for all documents, providingpaginationlabel usage

paginationCore function and parameter explanation of the tag

Once the list label is ready with the pagination data,paginationThe tag shines on the stage, responsible for presenting these pagination information in a readable and clickable page number form on the front-end page. Its basic usage format is{% pagination pages with show="5" %}of whichpagesIs a variable name you define, used to receive pagination data;showIs a very practical parameter that determines how many page number links are displayed before and after the current page number. For example,show="5"It means that in the pagination navigation, at most 5 page numbers will be displayed (excluding "Home page", "End page", etc.), which will usually intelligently expand around the current page number to maintain the simplicity of navigation.

AnQiCMS'paginationThe tag also provides an advanced parameter.prefix. If you need to customize the pagination URL structure in an unconventional way, for example, by using the default?page=2changed to?p=2, you can take advantage ofprefix="?p={page}"To implement. However, in most standard application scenarios, the default URL structure of AnQiCMS is already friendly, thereforeprefixThe parameters usually do not need to be manually set.

In-depth understanding of pagination data structure:pagesRich information of variables

When you usepaginationLabel and assign pagination data topagesThis variable after,pagesAn object will contain a series of useful information, convenient for us to build a complete pagination navigation.

Firstly, it will provide global statistics, such asTotalItems(Total document count),TotalPages(Total number of pages) as well asCurrentPage(Current page number). This information can be used to display statistics like 'Total XX items, Page Y/Z' at the bottom of the page, helping users understand the overall scale of the current list.

Next,pagesThe variable will also provide a series of convenient navigation link objects, includingFirst Page(Home page),Last Page（End Page）、Previous Page(Previous page) andNext Page(Next page). Each navigation link object includesName(Link text, such as “Home”, “Previous page”)，Link(The actual URL address) andIsCurrent(A boolean value indicating whether it is the current page) and other properties. By determiningIsCurrentproperties, we can add a highlight style to the current page number to enhance user experience.

The most core isPagesattribute, it is an array that contains the list of page numbers in the middle section. You need to traverse thisPagesAn array to render each page link, each array item also containsName/LinkandIsCurrentproperties. These fields make it easy to build dynamic and functional pagination navigation.

The practical application of pagination: building a complete document list pagination

To better illustratepaginationThe actual application of tags, let's see a combinationarchiveListImplement a typical code example for document list pagination. Assume we want to display 10 articles per page on the page and provide pagination navigation:

{# 1. 使用 archiveList 获取文档列表并准备分页数据 #}
{% archiveList archives with type="page" limit="10" %}
    <div class="article-list">
        {% for item in archives %}
        <article class="post-item">
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p>{{ item.Description }}</p>
            <div class="meta">
                <span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量：{{ item.Views }}</span>
            </div>
        </article>
        {% empty %}
        <p>当前分类下暂无文章。</p>
        {% endfor %}
    </div>

    {# 2. 使用 pagination 标签生成分页导航 #}
    <nav class="pagination-nav">
        <ul>
            {% pagination pages with show="5" %}
            {# 显示首页链接 #}
            <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>
            {% endpagination %}
        </ul>
    </nav>
{% endarchiveList %}

In this code block,archiveListresponsible for fetching data and informing the system that pagination is required (type="page") thereafter,paginationTag usagepagesvarious information contained in the variable dynamically generates a complete page navigation. Through conditional judgment ({% if %}and{% if item.IsCurrent %}), we can ensure that the 'Previous/Next page' links are only displayed when necessary, and a special style is added to the current page number.

**Practical and Advanced Techniques**

• Always usetype="page"This is the key to trigger the AnQiCMS to generate pagination data. If it is forgotten to set,paginationthe tag will not be able to get any pagination information.
• Reasonable settingslimitwithshow:limitControl the number of items displayed per page, which directly affects the user's browsing experience and page loading speed.showIt controls the length of page navigation to avoid redundancy due to too many page numbers. Adjust according to the website content and user habits.
• CSS style customization:paginationThe tag only generates HTML structure, and its appearance is completely controlled by frontend CSS.This provides designers with a great degree of freedom, allowing them to customize the design according to the overall style of the website.
• SEO friendly: AnQiCMS usually follows SEO **practices when generating pagination URLs, such as in