How to use the pagination tags of AnQiCMS to control the display of list content?

In a content management system, how to effectively display a large amount of information without sacrificing user experience is always a thought-provoking question.AnQiCMS provides a powerful and flexible pagination feature, allowing website administrators to finely control the display of list content, ensuring that the website is both beautiful and efficient.

To implement pagination control of list content, we need to understand the collaborative role of two core template tags in AnQiCMS: the first is responsible for obtaining and preparing list data, such asarchiveList(Document list),tagDataList(Tag document list) orcommentList(Comment list); next, it is specifically used for generating pagination navigationpaginationTags. When used together, they can build dynamic, user-friendly content lists.

Prepare content lists:archiveListWith pagination mode

In AnQiCMS, when we want to display a series of documents, products, or other content,archiveListIt is the most commonly used tag.Its main responsibility is to retrieve content from the database and filter and sort it according to our needs.archiveListSet a specific parameter for the tag:type="page".

Whentypethe parameter is set topagethen,archiveListIt is no longer just a simple list of all content that meets the conditions, but intelligently retrieves data based on the current page number and the number of items displayed per page. At the same time, we also need to go throughlimitParameters to specify the number of items to display per page. For example,{% archiveList archives with type="page" limit="10" %}This code tells the system to retrieve the content list for pagination display and show 10 items per page.

archiveListTags can be filtered by various conditions, such as throughcategoryId(Category ID) to get content under a specific category, throughorder(Sorting method) sorted by publish time or view count, even throughqSearch keyword to display the pagination of search results. These flexible parameters enablearchiveListto become the cornerstone of building a diverse content list.

Building pagination navigation:paginationThe art of tags

OncearchiveList(or other list tags) withtype="page"pattern retrieved pagination content, next is to display pagination navigation. At this time,paginationtag comes into play. This tag is usually followed by the content list'sforAfter the loop, it will generate "Previous page

paginationThe most commonly used parameter of the tag isshowIt determines how many page number links are displayed at the same time in the page navigation. For example,show="5"It will make the pagination navigation only display 5 page number links around the current page, which is very helpful for keeping the page neat and avoiding a long page number bar.

paginationThe tag will return a namedpagesThe object (if you specify another variable name in the label, then use the one you specify). ThispagesThe object includes all the details about the pagination status, which is crucial for us to build custom pagination styles. The fields we can access include:

• pages.TotalItems: Total number of contents.
• pages.TotalPages: Total number of pages.
• pages.CurrentPage: The current page number.
• pages.FirstPage: Home link information (including)Name/Link/IsCurrent)
• pages.LastPage: End page link information.
• pages.PrevPage: Previous page link information.
• pages.NextPage: Next page link information.
• pages.PagesAn array, containing the page link information of the middle part, we can iterate over it to generate page numbers such as 1, 2, 3... Each array element also containsName/LinkandIsCurrentProperty.

Utilizing these rich fields, we can control the display logic and style of pagination navigation through conditional judgment ({% if %}) and loop ({% for %}) to fine-tune the display logic and style of pagination navigation. For example, by checkingIsCurrentAttribute, we can add a page number to the current oneactiveClass, to highlight.

Comprehensive Application Example

Let's look at how these two tags work together with a simple example:

{# 1. 使用 archiveList 获取分页内容，每页显示10条 #}
{% archiveList archives with type="page" limit="10" %}
    {# 遍历并显示内容列表 #}
    {% for item in archives %}
    <div class="content-item">
        <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
        <p>{{ item.Description }}</p>
        <span class="meta">{{ stampToDate(item.CreatedTime, "2006-01-02") }} | {{ item.Views }} 次浏览</span>
    </div>
    {% empty %}
    <p>抱歉，当前分类或搜索条件下没有找到任何内容。</p>
    {% endfor %}
{% endarchiveList %}

{# 2. 使用 pagination 标签生成分页导航，并控制显示逻辑 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %}
    <ul>
        {# 显示总数信息 #}
        <li class="page-info">共 {{ pages.TotalItems }} 条记录，当前第 {{ pages.CurrentPage }}/{{ pages.TotalPages }} 页</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>

By the above code, AnQiCMS can intelligently determine the page number parameter in the current URL (usuallypage=N), automatically handles content retrieval and pagination link generation.This divide-and-conquer template design concept makes the pagination control of the content list intuitive and powerful.Whether it is to build a blog article list, a product display page, or a search results page, it can easily achieve efficient and user-friendly pagination experience.

Frequently Asked Questions (FAQ)

1. Why did I write the example code, but the page still only shows the first page content without pagination navigation?

This is usually because you arearchiveListIn the (or similar list label) forget to settype="page"Parameter.paginationThe label needs to work in pagination mode to get the total number of pages, current page, and other information to generate navigation. Please check yourarchiveListDoes the label containtype="page"For example{% archiveList archives with type="page" limit="10" %}.

2. How to change the number of items displayed per page, for example, from 10 to 20?

The number of items displayed per page is determined byarchiveListlabel'slimitParameter control. Just modify the value of this parameter, for example,limit="10"changed tolimit="20"The system will adjust the number of items displayed per page and the total number of pages accordingly.

3. How to customize pagination navigation styles, for example, making the current page number display in red?

The style of pagination navigation is completely controlled by CSS.paginationTag generation:pagesEach page in the object