How to set pagination for a document list and display page navigation?

In modern website operations, setting pagination for content lists is almost indispensable.It can not only significantly improve the user's browsing experience, avoid the slow loading caused by too long a single page, but also help search engines better crawl and index the website content.For friends using AnQi CMS, implementing pagination and displaying page navigation in the document list is a very intuitive and powerful feature.

Our AnQi CMS provides flexible template tags, allowing full control over content display. To set pagination for the document list and display page navigation in a friendly manner, we mainly use two core template tags: archiveListandpagination.

The first step: prepare the document list for pagination

First, we need to go througharchiveListThe tag is used to retrieve the document data that needs to be paginated. This tag is very powerful, as it can filter out articles, products, and various types of documents according to our needs.To enable pagination, the key is to providearchiveListLabel settingstype="page"Specify the parameters and how many items to display per pagelimitParameter.

For example, if we want to display the article model on the article list page,moduleId="1"All articles under this section, and 10 per page, we can write it like this:

{% archiveList archives with type="page" limit="10" moduleId="1" %}
    {# 在这里循环展示每一页的文档内容 #}
{% endarchiveList %}

Here, archivesIt is a variable name we define, which will carry the document data list contained in the current page. You can adjust it according to your actual situationmoduleIdFor example, the product list may bemoduleId="2"), even throughcategoryIdto specify a document under a specific category.

Second step: Display the document content on the current page

Get the document data on the current pagearchivesAfter that, we can useforLoop tags to traverse and display the details of each document.In the loop, you can easily access various fields such as the title, link, introduction, publication time, and reading volume of each document.

A typical document content display structure may look like this:

{% for item in archives %}
<div class="document-item">
    <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
    <p>{{item.Description}}</p>
    <div class="meta-info">
        <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        <span>阅读量: {{item.Views}}</span>
    </div>
</div>
{% empty %}
<p>抱歉，当前分类或搜索条件下暂时没有找到任何文档。</p>
{% endfor %}

We used hereitem.LinkGet the document link,item.TitleGet the title,item.DescriptionGet an overview.stampToDateTags can help us format timestamps into readable dates. IfarchivesThe list is empty,{% empty %}The content in the tag will be displayed, which helps to improve the user experience.

Step 3: Build page navigation

It's not enough to just display the documents on the current page, users also need to navigate to other pages through page numbers. At this point,paginationtags come into play. It automatically identifiesarchiveListLabel-generated pagination data, and render "Home", "Previous page",

We usually willpaginationput the label inarchiveListThe label below ensures that the user can easily find the navigation after the document content is displayed.paginationThe label can accept ashowThe parameter is used to control the maximum number of page numbers displayed in page navigation.

For example, displaying the navigation of up to 5 page numbers:

<nav class="pagination-nav">
    {% pagination pages with show="5" %}
    <ul>
        {# 显示总览信息 #}
        <li class="info">共 {{pages.TotalItems}} 条 / 第 {{pages.CurrentPage}} 页</li>

        {# 首页链接 #}
        <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 %}

        {# 尾页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
        </ul>
    {% endpagination %}
</nav>

In the code above,pagesIspaginationThe variable provided by the tag contains all information related to pagination, such as:

• pages.TotalItems: Total document count.
• pages.CurrentPage: Current page number.
• pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPage: Representing the links and names of the home page, last page, previous page, and next page. We can usepages.FirstPage.LinkTo get the link address,pages.FirstPage.NameGet the display text.
• pages.Pages: This is an array containing all the intermediate page number links, we can loop through them.{% for item in pages.Pages %}To display them one by one.
• item.IsCurrentThis boolean value is very useful, it can help us determine whether the current page number we are looping to is the page being accessed by the user, so as to highlight the current page.activestyle.

Combine these tags with the CSS style of your website, and a functional and beautiful document list pagination navigation is completed.The design concept of AnQi CMS aims to enable content operators to achieve powerful website functions with the minimum learning cost.

Frequently Asked Questions (FAQ)

Ask: Will the URL structure of the website change after pagination?

Yes, when you enable pagination on the document list, AnQiCMS will automatically add page number parameters to the list page URL.For example, if the base URL of your article list is/article/list.htmlThen the URL of the second page might become/article/list-2.htmlOr it may be displayed according to your pseudo-static rules./article/list/page/2This URL structure with explicit page numbers is very helpful for search engine optimization (SEO).

Question: Can other types of content besides document lists be paginated?

Of course you can. Anqi CMS'spaginationTags are general pagination navigation generators. As long as it supportstype="page"Parameter list tags, such astagDataList