How to properly configure the `pagination` tag to generate a fully functional pagination navigation on list pages?

In website content management, configuring a well-functioning pagination navigation for the list page is a key element to enhance user experience and optimize website structure. AnqiCMS (AnqiCMS) provides a simple yet powerfulpaginationLabels allow developers to easily implement this requirement.

To makepaginationTo correctly generate pagination navigation on the list page, it is first necessary to understand its working mechanism and the relationship with content list labels (such asarchiveListThe collaborative relationship between parentheses.paginationThe tag does not exist independently, it needs to obtain pagination data from the content list tags. This means that you must first usearchiveListThis content list label is used to query data, and it is explicitly specified that its type is pagination mode, thenpaginationLabels can be used to build pagination navigation based on these data.

Configure content list tags to support pagination

You need to use it on any list page where pagination navigation needs to be displayed, such as article list pages, product list pages, or category list pagesarchiveListLabel to get article or product data. The key is that you need totypeparameter settings"page", and go throughlimitparameters to define the number of items displayed per page.

For example, if you want to display 10 articles per page on a page, you can configure it like thisarchiveListTags:

{% archiveList archives with type="page" limit="10" %}
    {# 循环输出每篇文章的简要信息 #}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
        </a>
    </li>
    {% endfor %}
{% endarchiveList %}

Here,archivesIs a variable name, it will contain the article data of the current page.type="page"Tell the CMS that this is a paged list.limit="10"Then set the number of items per page.

Deep understandingpaginationTag configuration

InarchiveListAfter the tag, you can introducepaginationTags to generate pagination navigation.paginationThe usage of the label is as follows:

{% pagination pages with show="5" %}
    {# 在这里构建您的分页导航 HTML 结构 #}
{% endpagination %}

Here,pagesIt is a variable that contains all pagination information, it is generated byarchiveList type="page"automatically generated.show="5"The parameter specifies the maximum number of pagination buttons to display. For example, if there are a total of 10 pages,show="5"It may display the current page number and 5 pages before and after, instead of all 10 pages.

pagesThe variable contains rich pagination status and link information, which you can use to build a complete pagination navigation:

• pages.TotalItemsTotal number of items.
• pages.TotalPages: Total number of pages.
• pages.CurrentPage：Current page number.
• pages.FirstPage：Home object, includingName(for example, "Home Page") andLink.
• pages.LastPage：End object, includesName(for example, "end page") andLink.
• pages.PrevPage：Previous page object, includesName(for example, "previous page") andLink. If the current page is the first page, this object is empty.
• pages.NextPageNext page object, includingName(for example, "Next page") andLink. If the current page is the last page, this object is empty.
• pages.PagesAn array that contains detailed information about the middle page numbers, each element of which includesName(page number),LinkandIsCurrent(whether the current page).

Using this information, you can flexibly design the layout of pagination navigation.An English common feature-rich pagination navigation will include elements such as 'Home', 'Previous Page', 'Page Numbers', 'Next Page', and 'End Page'.

The following is an example of a recommended, feature-complete and easy-to-understand pagination navigation implementation:

<div class="pagination-nav">
    {% pagination pages with show="5" %}
    <ul>
        {# 显示总数信息，方便用户了解列表规模 #}
        <li>共 <b>{{pages.TotalItems}}</b> 条记录，<b>{{pages.TotalPages}}</b> 页，当前第 <b>{{pages.CurrentPage}}</b> 页</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 this structure, you can easily add styles to pagination navigation with CSS, such as highlighting the current page number, or hiding the non-clickable "Previous Page" / "Next Page" buttons.

Combine search and filter functions.

It is worth mentioning that Anqi CMS'spaginationTags can also be seamlessly integrated with search and filter functions. When yourarchiveListtag page containsqparameters (search keywords) or custom filter parameters,paginationThe generated link for tags will automatically include these parameters, ensuring that the search and filter conditions are still valid when users navigate through pages.This greatly simplifies the work involved in developing complex list pages, without the need to manually handle URL parameters.

In short, proper configurationpaginationTags, are the foundation for building efficient, user-friendly security CMS website list pages. By understandingarchiveListWithpaginationthe relationship between them, and utilizingpagesVariable provides rich information, you can easily implement powerful pagination navigation.

---

Common Questions (FAQ)

1. Why did I configurepaginationtags, but pagination navigation is not displayed on the page?

The most common reason is that the tag (such asarchiveListortagDataList）没有正确设置type="page"the parameter, or it has not been setlimitParameter.paginationThe label needs this information to know how to paginate and how many items to display per page. Make sure that your content list label is similar to{% archiveList archives with type="page" limit="10" %}.

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

paginationThe tag only provides dynamic data and links required for pagination, and the specific HTML structure and CSS styles are completely under your control. You can{% pagination pages with show="5" %}...{% endpagination %}between the code blocks, use HTML tags (such asul,li,a) combined with CSS class names to design the appearance you want. For example, you can useclass="active"To mark the current page, then highlight it through CSS rules.

3. Does my list page have search and filter functions, and will these conditions be lost when paginating?

Would not. The Anqi CMS'spaginationThe tag design is very intelligent, it will automatically inherit the search keywords from the current page URL (qParameters) and any custom filter parameters.This means that when the user is paging through search or filter results, the pagination links will automatically retain these query parameters to ensure a seamless user experience.You do not need to make any additional configuration to handle this situation.