How to implement pagination functionality in AnQiCMS

For any website that carries a large amount of content, how to efficiently and friendly display these contents is undoubtedly one of the keys to successful operation.When the number of articles, products, tag pages, and other content is large, it is obviously unrealistic to stack them all on a single page, not only will the loading speed be slow, but users will also find it difficult to find the information they need.At this point, the pagination function becomes particularly important.

In AnQiCMS, implementing pagination is quite intuitive and flexible.It cleverly combines the acquisition of content lists with the display of pagination navigation, making the organization and presentation of website content both beautiful and efficient.

Core Concept: The perfect combination of list and pagination

In AnQiCMS, the pagination feature is not isolated, it is closely connected with the content list call.This means that you first need to obtain the data that needs to be displayed with pagination by means of the corresponding content list tags.For example, in the list of the most commonly used articles, we usually usearchiveList.

when you wisharchiveListThe data returned by the label is paginated, not displayed all at once or only a fixed number at a time, just set it in the labeltype="page"the parameters, and specify the number of items per pagelimitFor example, if you want to display a list of articles on a page and show 10 articles per page, you can write the code like this:

{% archiveList archives with type="page" limit="10" %}
    {# 这里是您的文章列表循环代码 #}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </div>
    {% empty %}
        <p>暂时没有文章内容。</p>
    {% endfor %}
{% endarchiveList %}

This code will inform AnQiCMS to retrieve the list of article data, but not to provide it all at once, but to provide it in batches by page, with a maximum of 10 items per page. ThrougharchivesThis variable, you can iterate over the articles on the current page as usual.

Building pagination navigation:paginationMagic of tags

Just getting a list of articles that can be paginated is not enough, the user also needs to see the page navigation buttons on the page. The powerful feature is responsible for generating the page navigation buttons and links.pagination.

paginationThe label usually follows its corresponding list label. It automatically reads the pagination information of the current page (such as total number of pages, current page number, home link, previous page link, etc.), and then renders a beautiful pagination navigation according to your configuration.

This tag is the most commonly used parametershowIt determines the maximum number of page buttons displayed in pagination navigation. For example,show="5"This means that 5 page numbers will be displayed before and after the current page number.

While usingpaginationWhen a tag is used, it will encapsulate all pagination information in a variable namedpages, and you can access all data related to pagination through this variable, for example:

• pages.TotalItems: Total number of contents.
• pages.TotalPages: Total number of pages.
• pages.CurrentPage: The current page number.
• pages.FirstPage: Home object, includingLink(Link) andName(Name), as well asIsCurrent(whether it is the current page).
• pages.LastPage: End page object, similar in structure to the home object.
• pages.PrevPage: Previous page object, similar in structure to the home object.
• pages.NextPage: The next page object, similar in structure to the home page object.
• pages.Pages: An array of objects containing all the intermediate page numbers (usually a few pages around the current page number), each object also containsLink/NameandIsCurrent.

You can use this information to highly customize your pagination style.

Practical exercise: Step-by-step implementation of pagination

Now, let's combine the article list with the pagination navigation, and see what the complete pagination implementation code roughly looks like:

{# 1. 使用 archiveList 标签获取可分页的文章数据 #}
{% archiveList archives with type="page" limit="10" %}
    <div class="article-list">
        {% for item in archives %}
            <div class="article-item">
                <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
                <p>{{item.Description}}</p>
                <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量: {{item.Views}}</span>
            </div>
        {% empty %}
            <p>暂时没有文章内容。</p>
        {% endfor %}
    </div>
{% endarchiveList %}

{# 2. 使用 pagination 标签生成分页导航 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页链接，如果当前是首页则添加 active 样式 #}
        <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 %}

        {# 末页链接，如果当前是末页则添加 active 样式 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    <p class="page-info">
        共 {{pages.TotalItems}} 条内容，当前第 {{pages.CurrentPage}} / {{pages.TotalPages}} 页
    </p>
    {% endpagination %}
</div>

In this code block,archiveListResponsible for content filtering and batching,paginationIt is responsible for displaying page numbers, home page, end page, previous page, next page, and other navigation elements. By judgingIsCurrentattribute, you can easily add highlight styles to the current page number to enhance the user experience.

It's not just a list of articles: pagination for more scenarios

The pagination logic of AnQiCMS is unified and flexible. In other scenarios where you need to display content in bulk, such as product lists (if the content model defines products), tag document lists, or even comment lists, you can use a similar approach.type="page"The parameter withpaginationThe combination of labels to implement pagination.

For example, to get a list of documents under a certain Tag and paginate, you can usetagDataListTags:

{% tagDataList archives with type="page" limit="15" %}
    {# 标签下的文档列表循环 #}
    ...
{% endtagDataList %}
{% pagination pages with show="7" %}
    {# 分页导航 #}
    ...
{% endpagination %}

This consistency makes template development and maintenance simpler, you only need to master a set of pagination patterns to meet the diverse content pagination needs of AnQiCMS.

Summary

AnQiCMS implements pagination functionality with full consideration of convenience and scalability. By simply setting parameters in the content list tagstype="page"andlimitand combining powerful features withpaginationTags, you can easily add professional and smooth pagination navigation to your website content.This not only improves the user browsing experience, but also helps to structure the website content and optimize search engine optimization, allowing your website to stand out in the information flood.

Frequently Asked Questions (FAQ)

How to modify the number of articles/products displayed per page?

You can adjust the parameter value in the content list tag (such asarchiveList/tagDataList) to modify the number of items displayed per page. For example, to adjust thelimitvalue of the parameter.limit="10"changed tolimit="20"This will allow 20 items to be displayed per page.

2. Can the URL structure of pagination links be customized? For example, to/list-1.html?page=2changed to/list-1_2.html?

Yes, AnQiCMS provides powerful static rule management functions.You can find the 'Static Rule' under the 'Feature Management' menu in the background, where you can choose or customize a URL structure that meets your needs, including integrating pagination parameters into the URL path.For example, in the custom rule, pagination page number{page}It can be placed within parentheses, such as:(-{page})This allows the page number to be displayed in the form of/list-1-2.htmlSuch a form of display.

3. Besides articles and products, what types of content support pagination?

The pagination feature of AnQiCMS is universal. In addition to common articles (archiveList）and custom content models (such as products), it also supports document lists under tags（tagDataList）and website content comment lists（commentList）with pagination. As long as the corresponding content list tags supporttype="page"Parameters, you can cooperatepaginationTags can be used to achieve pagination effects.