In website operation, when the content quantity is large, how to efficiently and beautifully display these contents, while ensuring that users can browse conveniently, is the key to improving user experience.If you dump all the content onto a single page, it not only loads slowly but also makes visitors hesitate.At this point, content pagination becomes particularly important.It breaks massive information into several pieces, which not only lightens the page loading burden but also allows users to explore the content of interest at their own pace, step by step.paginationTags, allowing us to easily implement and control the pagination display effect of website content.

paginationTag Overview

AnQiCMSpaginationTags are specifically designed for generating and controlling pagination navigation for list-based content (such as article lists, product lists, etc.). It is usually associated with data list tags (such asarchiveListClosely cooperate, ensuring that a complete set of page navigation mechanisms is automatically generated when the list content exceeds the display limit of a single page. This means you do not need to manually calculate page numbers or build complex URL logic.paginationThe tag will take care of everything.

How to cooperatearchiveListTag usage

To makepaginationFor the tag to take effect, first make sure your content list tag (such as)archiveList) is configured to support pagination mode. InarchiveList标签中，关键在于将 Englishtypeparameter settingspage. For example:{% archiveList archives with type="page" limit="10" %}Here,limit="10"定义了每页显示的内容数量。当 EnglishtypesetpagewhenarchiveList不再只返回固定数量的列表项，而是准备好一个可分页的数据集，供 EnglishpaginationThe label is further processed to generate the corresponding pagination link and page number information.

paginationTagsshowParameters

paginationThe flexibility of the label is reflected in itsshowThe parameter on. This parameter allows you to control how many page number buttons are actually displayed in the pagination navigation. For example,show="5"It means that at most 5 page number buttons (excluding “First Page”, “Previous Page”, “Next Page”, “Last Page”) will be displayed before and after the current page.This design helps maintain a simple page navigation, avoiding interface confusion caused by too many page numbers.

{# 假设我们有一个archiveList配合分页的数据集 #}
<div>
    {% archiveList archives with type="page" limit="10" %}
        {# ... 遍历 archives 显示内容 ... #}
    {% endarchiveList %}

    <div class="pagination">
        {% pagination pages with show="5" %}
            {# 这里将渲染出页码导航 #}
        {% endpagination %}
    </div>
</div>

paginationParsing the available fields inside the label

paginationThe label will return a paginated information after execution, containing rich pagination details:pagesThrough this object, you can finely control every detail of the pagination navigation:

  • TotalItems: Current data set page