In a content management system, how to efficiently display a large number of articles or products without sacrificing user experience, this is usually a challenge that website operators face. AnQiCMS (AnQiCMS) provides powerful template tag functions, wherepaginationTags are the tools to solve this problem, they can flexibly handle the pagination display logic of article lists and product lists, making the content of your website organized.

Understand the importance of pagination.

Imagine if your website had hundreds or even thousands of news articles or products loaded and displayed on the page at once. Not only would this make the page bulky and slow to load, but it would also make it easy for users to get lost in the vast sea of information.The pagination mechanism came into being, which divides the content of long lists into several small blocks, displays them in batches, and greatly improves the page loading speed and user browsing experience.At the same time, reasonable pagination also helps search engines better crawl and index website content, which is also crucial for SEO performance.

paginationLabel Overview

In AnQi CMS,paginationLabels are specifically used to generate pagination navigation. It can receive content list tags (such as article listsarchiveListOr product list) after processing the pagination data, and convert it into a user-friendly pagination link group.

This is the basic structure of the tag:

{% pagination pages with show="5" %}
    {# 在这里放置你的分页HTML结构 #}
{% endpagination %}

here,pagesIs a variable containing all pagination information, andshow="5"It is an optional parameter that tells the system to display a maximum of 5 page number buttons in the pagination navigation.

How does it work with the content list?

paginationTags are not isolated entities; they need to be used in conjunction with list tags that can generate pagination data. The most common example isarchiveListtags, which are used to retrieve article or product lists.

when you wisharchiveListLabel-generated data that can be paginated needs to be set uptype="page"parameters. For example, when getting a list of articles displayed per page, yourarchiveListlabel will look like this:

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

In this example:

  • archivesis a variable that contains the article data on the current page.
  • type="page"Clearly tell the system that the list needs to generate pagination data, not just a simple content listing.
  • limit="10"This defines the number of articles displayed per page. This parameter is crucial as it determines the total number of pages and the content carried by each page.

WhenarchiveList(or other list tags that support pagination, such astagDataList/commentList) is set totype="page"When it is, it will prepare all the data related to pagination in the background and pass this data to the template inpagesvariables, forpaginationlabel usage

paginationtag parameters and internal variable parsing

paginationWithin the tag, you can access a variable namedpageswhich contains all the detailed information related to pagination status. You can use this information to build various styles of pagination navigation.

  1. showParameter

    • show="5": Controls the number of visible page numbers in pagination navigation. For example, when the total number of pages is large,show="5"it will only display 5 page numbers around the current page (such as... 3 4 [5] 6 7 ...)

  2. pagesthe core properties of the variable

    • pages.TotalItemsThe total number of items in the list.
    • pages.TotalPagesThe total number of pages of content.
    • pages.CurrentPageThe page number the current user is browsing.

  3. Navigation element object pagesVariables also provide several convenient objects for quickly building links to the “Home”, “Previous”, “Next”, and “End” pages:

    • pages.FirstPage: IncludesName(usually the “Home” page),Link(Home link) andIsCurrent(whether it is the current page) attribute.
    • pages.LastPage: IncludesName(usually 'Last page') ,Link(Last page link) andIsCurrentProperty.
    • pages.PrevPage: IncludesName(usually 'Previous page') ,Link(Previous page link) attribute. If the current page is the first page, this object will not exist (nil), and you can use{% if pages.PrevPage %}to judge.
    • pages.NextPage: IncludesName(usually 'next page'),Link(Next page link) property. If the current page is the last page, this object will not exist.

  4. Middle page number arraypages.PagesThis is an array that contains all the specific page numbers that need to be displayed (based onshowParameters are dynamically generated. You need to use{% for item in pages.Pages %}to iterate over it. Each item in the arrayitemcontains:

    • item.Name: Page number.
    • item.Link: The link of the page number.
    • item.IsCurrentA boolean value indicating whether the page number is the current page. This is very useful for adding highlight styles to the current page number.

Practice exercise: Build a complete pagination navigation

Next, we will demonstrate through a practical code example how to implement pagination display of article lists in AnQi CMS.

{# 1. 首先，使用 archiveList 标签获取需要分页的文章数据 #}
{% archiveList archives with type="page" limit="10" %}
    <div class="article-list">
        {% for item in archives %}
        <div class="article-item">
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p>{{ item.Description }}</p>
            <span class="date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </div>
        {% empty %}
        <p>暂无文章内容。</p>
        {% endfor %}
    </div>
{% endarchiveList %}

{# 2. 接着，使用 pagination 标签生成分页导航 #}
<nav class="pagination-nav">
    {% pagination pages with show="5" %}
        <ul class="pagination-list">
            {# 显示总条数、总页数和当前页码，有助于用户了解整体进度 #}
            <li class="info">总计 {{pages.TotalItems}} 条，共 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>

            {# 首页链接：如果当前页不是首页，则显示 #}
            {% if pages.FirstPage and not pages.FirstPage.IsCurrent %}
                <li><a href="{{pages.FirstPage.Link}}" class="page-link">{{pages.FirstPage.Name}}</a></li>
            {% endif %}

            {# 上一页链接：如果存在上一页，则显示 #}
            {% if pages.PrevPage %}
                <li><a href="{{pages.PrevPage.Link}}" class="page-link">{{pages.PrevPage.Name}}</a></li>
            {% endif %}

            {# 中间页码：循环显示根据 show 参数计算出的页码 #}
            {% for item in pages.Pages %}
                <li {% if item.IsCurrent %}class="active"{% endif %}>
                    <a href="{{item.Link}}" class="page-link">{{item.Name}}</a>
                </li>
            {% endfor %}

            {# 下一页链接：如果存在下一页，则显示 #}
            {% if pages.NextPage %}
                <li><a href="{{pages.NextPage.Link}}" class="page-link">{{pages.NextPage.Name}}</a></li>
            {% endif %}

            {# 尾页链接：如果当前页不是尾页，则显示 #}
            {% if pages.LastPage and not pages.LastPage.IsCurrent %}
                <li><a href="{{pages.LastPage.Link}}" class="page-link">{{pages.LastPage.Name}}</a></li>
            {% endif %}
        </ul>
    {% endpagination %}
</nav>

This code first goes througharchiveListAfter obtaining and displaying the article list, then紧接着使用paginationLabels built the pagination navigation. It is based onpagesData provided by the variable, dynamically judged and displayed the links of 'Home', 'Previous page', 'Specific page number', 'Next page', and 'End page', and added the current page numberactiveClass names for CSS highlighting.

More than just articles and products: pagination application for other lists.

paginationThe flexibility of tags goes beyond articles and products. In Anqi CMS, anything that supportstype="page"Parameter list labels, can be combinedpaginationTags can be used to implement pagination. For example:

  • Document list under the tag (Tag): tagDataListTags also support.type="page"You can display the pagination list of all documents under the tag details page.
  • Comment list: commentListTags can also be used throughtype="page"to implement the pagination display of comment content.

This unified design concept makes it possible in Anqi CMS