How to generate and control the pagination display effect of the `pagination` tag?

In website operation, when the amount of content 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 on the same page, it will not only load slowly but also make the visitor shy away.At this moment, content pagination becomes particularly important. It divides a large amount of information into several small pieces, both reducing the page loading burden and allowing users to explore the content they are interested in at their own pace, step by step.AnQiCMS provides a powerful and flexiblepaginationLabel, allowing us to easily implement and control the pagination display effect of website content.

paginationLabel Overview

AnQiCMS'paginationTags are designed to generate and control pagination navigation for list-type content (such as article lists, product lists, etc.). They are usually used with data list tags (such asarchiveListWork closely together to ensure that a complete set of pagination 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 the number of pages or build complex URL logic,paginationThe label will help you take care of everything.

How to cooperatearchiveListTag usage

To makepaginationTo make the label work, first make sure your content list labels (such asarchiveList) have been configured to support pagination mode. InarchiveListIn the tag, the key is totypethe parameter topage. For example:{% archiveList archives with type="page" limit="10" %}. Here,limit="10"Defined the number of items displayed per page. Whentypeis set topagethen,archiveListNo longer just return a fixed number of list items, but prepare a paginated dataset forpaginationFurther processing of tags generates corresponding pagination links and page numbers.

paginationlabel'sshowParameter

paginationThe flexibility of tags is reflected in itsshowOn the parameter. This parameter allows you to control how many page number buttons are displayed in the pagination navigation. For example,show="5"means that up to a total of 5 page number buttons will be displayed before and after the current page number (excluding "Home", "Previous Page", "Next Page", "End Page").This design helps to keep the pagination navigation simple and avoid chaos 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>

paginationThe available fields inside the tag are explained.

paginationThe label will return a rich pagination information after executionpagesobject. Through this object, you can finely control every detail of pagination navigation:

• TotalItems: All records in the current paginated dataset