For any website that carries a large amount of content, how to efficiently and friendily present these contents is undoubtedly one of the keys to successful operation.When the number of articles, products, tabs, and other content is large, it is obviously not practical to pile them all on one page. Not only is the loading speed slow, but users also find it difficult to find the information they need.This pagination feature is 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 integration 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 access the corresponding content list tags to get the data that needs to be displayed with pagination.archiveListLabel.

When you wantarchiveListThe data returned by the label is pageable, not displayed all at once or only a fixed amount, 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 fetch the article list 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. ByarchivesThis variable, you can traverse the articles on the current page as usual.

Build pagination navigation:pagination标签的魔法English

仅仅获取了可分页的文章列表还不够，用户还需要在页面上看到切换页码的导航按钮。真正负责生成页面切换按钮和链接的，是功能强大的paginationLabel.

paginationLabels are usually immediately following their corresponding list labels.It will automatically read the pagination information of the current page (such as the total number of pages, the current page number, the home link, the previous page link, etc.), and then render a beautiful pagination navigation according to your configuration.

This label most commonly used parameter isshowIt determines how many page buttons are displayed in the pagination navigation. For example,show="5"It means that 5 page numbers will be displayed before and after the current page.

When usingpaginationLabel, it will encapsulate all pagination information in a variable namedpages. You can access all pagination-related data through this variable, for example:

  • pages.TotalItems: Total number of contents.
  • pages.TotalPagesTotal number of pages.
  • pages.CurrentPageCurrent page number.
  • pages.FirstPage：Home object, includingLink(link) andName(Name), as well asIsCurrent(Is the current page).
  • pages.LastPage：Last page object, similar to the home page object.
  • pages.PrevPage：Previous page object, similar to the home page object.
  • pages.NextPage：Next page object, similar in structure to the home page object.
  • pages.Pages：An array of objects containing all the intermediate page numbers (usually several page numbers 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 and pagination navigation to see what the overall pagination implementation code 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,archiveListResponsible for content filtering and batching,paginationThen it is responsible for displaying page numbers, home, end, previous, next, and other navigation elements. By judgingIsCurrentproperties, you can easily add highlighting styles to the current page number to enhance the user experience.

Not just an article list: pagination application in more scenarios

The pagination logic of AnQiCMS is unified and flexible. In addition to the article list, you can also use a similar approach 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.type="page"Parameters withpaginationThe combination of tags to implement pagination.

For example, to get a document list 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 easier, you only need to master a set of pagination patterns to meet the diverse content pagination needs in AnQiCMS.

Summary

AnQiCMS in the implementation of pagination, fully considers the convenience and scalability. Through simply setting in the content list tag.type="page"andlimitparameters, and combining with powerfulpaginationTags, you can easily add professional and smooth pagination navigation to your website content.This not only enhances the user browsing experience, but also helps structure the website content and optimize search engine results, allowing your website to stand out in the information deluge.

Common Questions (FAQ)

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

You can adjust the number of articles/products displayed per page by changing the value in the content list tag (such asarchiveList/tagDataList).limitThe parameter value to modify the number of items displayed per page. For example, tolimit="10"tolimit="20"，即可让每页显示20条内容。

2. 分页链接的URL结构可以自定义吗？例如将/list-1.html?page=2to/list-1_2.html?

Yes, AnQiCMS provides a powerful pseudo-static rule management feature.You can find the 'Static Rules' under the 'Function Management' menu in the background. Here you can select or customize URL structures that better meet your needs, including integrating pagination parameters into the URL path.{page}可以放在小括号内，如：(-{page})，这允许将页码以/list-1-2.htmlThis form of display.

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

AnQiCMS pagination feature is universal. Besides 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"Parameter, you can cooperatepaginationTag to achieve pagination effect.