How to implement pagination display of document list in AnQiCMS template using `pagination` tag?

As an experienced CMS website operator, we understand that it is crucial to efficiently display a large amount of content and ensure a user-friendly browsing experience in a content management system.For a document list, pagination display is the core function to achieve this goal.paginationThe tag plays a key role in connecting the document list with page navigation, enabling a large number of documents to be presented to the user in a structured manner while maintaining flexibility and customizability.

To understandpaginationThe principle of the label, we first need to clarify the content list it depends on. In AnQiCMS, such asarchiveList(Document list),tagDataList(Tag associated document list) andcommentList(Comment list) tags, if pagination is required, it must be theirtypethe parameter topage. For example, when we want to display documents in a paginated list of articles, we will usearchiveListtags, and specifytype="page"Approved at the same timelimitParameter setting the number of documents displayed per page.

Once the content list tag is configured astype="page，AnQiCMS system will handle all the data required for pagination in the background and pass these data to the template. At this time,paginationThe role of the tag is highlighted, it is responsible for converting these pagination data into actual pagination navigation links visible on the user interface.

paginationThe basic method of using the tag is{% pagination pages with show="5" %}...{% endpagination %}. Here,pagesIt is an automatic pagination data object filled by the system, whileshowThe parameter allows us to control the maximum number of page link navigation displayed, such asshow="5"Means showing up to 5 page numbers around the current page. Additionally, it has a advanced parameterprefixUsed to redefine the pagination URL pattern, but usually we do not need to adjust it manually.

paginationTags inside provide a rich set of fields for template developers to call, to build flexible pagination navigation. These fields includeTotalItems(Total number of entries),TotalPages(Total number of pages),CurrentPage(Current page number) and other basic information. What's more, it also provides page objects pointing to specific pages:FirstPage(Home page),LastPage(End page),PrevPage(Previous page) andNextPage(Next page). These page objects themselves containName(Link name),Link(link address) andIsCurrent(Whether the current page) and other properties, making it convenient for us to directly generate navigation links and mark the current page.

To display the middle page number,paginationthe label provides a namedPagesarray. ThisPagesarray contains all clickable page number objects, we can useforLoop through it and, based on the properties of each page objectIsCurrentdetermine whether it is the current page and assign different styles accordingly.

Integrate all this together, a typical document list pagination display will be like this: First, we usearchiveListtags to obtain the pagination document data, and then inendarchiveListthe tag, then immediately usepaginationTags to render pagination navigation.

{# 首先，使用 archiveList 标签获取分页文档列表 #}
<div>
{% archiveList archives with type="page" limit="10" %}
    {# 遍历文档列表，显示每篇文档的标题、描述等信息 #}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>{{item.Views}} 阅读</span>
            </div>
        </a>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </li>
    {% empty %}
    <li>
        当前分类或搜索条件下没有任何文档。
    </li>
    {% endfor %}
{% endarchiveList %}

    {# 紧接着，使用 pagination 标签渲染分页导航 #}
    <div class="pagination">
        {% pagination pages with show="5" %}
        <ul>
            {# 显示总条目数、总页码数、当前页码等统计信息 #}
            <li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
            {# 渲染首页链接，并根据 IsCurrent 属性添加激活样式 #}
            <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 %}
            {# 渲染末页链接，并根据 IsCurrent 属性添加激活样式 #}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
            </li>
        </ul>
        {% endpagination %}
    </div>
</div>

By using the above combination, we not only achieved pagination display of the document list, but also provided users with a clear and intuitive navigation method.This flexible tag design makes the template creation of AnQiCMS efficient and flexible, whether it is for SEO-friendly URL structures or to optimize user experience, it can easily cope with it.

Frequently Asked Questions (FAQ)

In AnQiCMS templatepaginationWhy may the tag not display or display incorrectly?paginationThe tag needs to be used with list tags that support pagination features such asarchiveList/tagDataListorcommentListAnd these tagstypeThe parameter must be set topagemust work properly. If these prerequisite conditions are not met, orlimitthe parameter settings are incorrect (for example, the number of items per page is too large, causing the total number of pages to be insufficient to trigger pagination),paginationThe label may not be rendered.

How to customizepaginationThe pagination navigation style generated by the label?paginationThe tag is only responsible for providing pagination data and link structure, the specific style needs to be controlled by CSS. In the provided example code, we added to the pagination container.paginationAdd class to each page itempage-itemAdd class to the current pageactiveClasses. You can define your own styles using these class names in the CSS file, such as setting the background color, font size, margin, and highlighting effect of the current page number.

paginationCan the tag be used for pagination of any list data? The document clearly states,paginationThe tag is used to retrievepagination information for article lists, product lists,and is also inarchiveList/tagDataListandcommentListThe document mentions that it willtypeis set topagecan be used subsequentlypaginationThis means it is mainly designed for these pageable content lists built into the system, it may not be directly usable for other customized or non-list type datapaginationTagging for pagination. If pagination is needed for other data, it is usually necessary to perform additional data processing at the controller level and manually construct the pagination logic.