How to implement pagination control for content list display in Anqi CMS?

In website operation, how to efficiently display and manage a large amount of content while ensuring a smooth browsing experience is a challenge that every webmaster needs to face.AnQiCMS (AnQiCMS) provides an intuitive and powerful control capability for pagination display of content lists, allowing you to easily achieve an orderly presentation and efficient navigation of content.

To implement the pagination display of content lists, we mainly use two core tags from the Anqi CMS template: content list tags (such asarchiveList/tagDataList/commentList）and pagination tags（pagination)

Core mechanism: content list tags and pagination mode

First, you need to use the content list tag to get the required content data. For example, in the article list, we commonly usearchiveListLabel. This label not only helps you filter and sort articles, but more importantly, it provides the key parameters to enable pagination mode.

When you want to display the list content in a paginated manner, you need to specify inarchiveList(ortagDataList/commentListetc.) tags explicitlytype="page". This is to inform the Anqi CMS system that the content set you are currently retrieving needs to support pagination. For example:

{% archiveList archives with type="page" limit="10" categoryId="1" %}
    {# 循环展示文章内容 #}
{% endarchiveList %}

In the above example:

• archivesIs the custom variable name you use to store the article data you retrieve.
• type="page"The pagination feature has been explicitly enabled.
• limit="10"The number of articles displayed per page is set to 10. You can adjust this number according to your actual needs.
• categoryId="1"is an optional filter condition indicating that only articles under the category with ID 1 should be retrieved. You can also addmoduleId(Content Model ID),q(search keywords) and other parameters to further refine the content selection.

After this configuration,archivesThe variable stores not only all the articles, but also the article data on the current page.

To build pagination navigation:paginationTag

Just getting the article data on the current page is not enough to complete the pagination function, the user also needs a complete set of pagination navigation to switch pages. At this point, it is necessary to use the Anqi CMS providedpaginationLabel. This label is specially designed to cooperatetype="page"The list label is designed to intelligently generate all pagination information including total number of pages, current page number, previous and next page links.

Generally,paginationThe label follows the content list tag, for example:

{# ... archiveList 标签代码 ... #}

{% pagination pages with show="5" %}
    {# 渲染分页导航 #}
{% endpagination %}

Here, pagesIs the custom variable name you set for pagination information.show="5"This parameter controls the maximum number of page numbers displayed at the same time in the pagination navigation, for example, if you are on page 10, the navigation may display “Previous page…8, 91011, 12...Next page, showing 5 page numbers.

pagesThe variable contains rich pagination data, you can use this data to build a complete and flexible pagination navigation:

• pages.TotalItems: Total number of articles.
• pages.TotalPages: Total number of pages.
• pages.CurrentPage: The current page number.
• pages.FirstPageandpages.LastPage: It includes the names and links of the first page and last page, as well as the status of whether it is the current page.IsCurrent)
• pages.PrevPageandpages.NextPage: If available, it includes the names and links of the previous page and next page.
• pages.PagesThis is an array that contains detailed information of all intermediate page numbers, each page object hasName(page number),Link(Page link) andIsCurrent(whether it is the current page) property.

By traversingpages.Pagesan array and combine it with conditional judgments such as{% if item.IsCurrent %}active{% endif %}You can easily add highlight style to the current page number to enhance user experience.

Actual operation example: combination of list and pagination.

In the actual template file, the structure of your code will roughly be like this:

`twig {# Possible breadcrumbs or other content at the top of the page #}