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

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

To implement the pagination of content lists, we mainly use two core tags from the Anqi CMS template: content list tag (such as)archiveList/tagDataList/commentList) and pagination tag (pagination).

核心机制：内容列表标签与分页模式

首先，您需要通过内容列表标签来获取所需的内容数据。以文章列表为例，我们常用EnglisharchiveListThis tag can help you filter and sort articles, and more importantly, it provides the key parameter to enable pagination mode.

When you want the list content to be displayed in a paginated form, you need to specify inarchiveList(or}tagDataList/commentListtags (such as) explicitlytype="page"This tells the 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 variable name you define to store the retrieved article data.
• type="page"Explicitly enabled the pagination feature.
• limit="10"Set the number of articles displayed per page 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 are obtained. You can also addmoduleId(Content Model ID),q(search keywords) and other parameters to further refine the content selection.

After this configuration,archivesWhat is stored in the variable is not just all the articles, but the article data of the current page.

Build pagination navigation:paginationtags

Just getting the current page of article data is not enough to complete the pagination feature. Users need a complete set of pagination navigation to switch pages. At this time, it is necessary to use the one provided by Anqi CMS.paginationLabel. This label is specifically designed to cooperatetype="page"with the list label, and it can intelligently generate all pagination information including total number of pages, current page number, and previous/next page links.

Usually,paginationLabels will follow the content list label, for example:

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

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

Here,pagesIs the variable name you customize for pagination information.show="5"This parameter controls the maximum number of page numbers displayed in the pagination navigation, for example, if you are on page 10, the navigation may display “Previous page…8, 9, ”1011, 12...Next page

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

• pages.TotalItems: Total number of articles.
• pages.TotalPagesTotal number of pages.
• pages.CurrentPage：The current page number being accessed.
• pages.FirstPageandpages.LastPage：Separately 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 they exist, they include the names and links of the previous page and next page.
• pages.PagesThis is an array that contains all the detailed information of intermediate page numbers, each page object hasName：(page number),Link(Page link), andIsCurrent(whether it is the current page) property.

By traversingpages.Pagesarray, and combines conditional judgment (for example{% if item.IsCurrent %}active{% endif %}），You can easily add highlight styles to the current page number to enhance user experience.

Actual operation example: combining list and pagination.

In the actual template file, your code structure will generally look like this:

`twig {# Breadcrumbs or other content that may be at the top of the page #}