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

AutoCMS provides us with flexible template tags, allowing us to firmly hold the control of content display in our own hands. To set pagination for the document list and display page navigation in a friendly manner, we will mainly use two core template tags: archiveListandpagination.

第一步：Prepare the document list for pagination

Firstly, we need toarchiveListLabel to get the paginated document data.This tag is very powerful, it can filter out various types of documents such as articles, products, and more according to our needs.archiveListSet tagstype="page"the parameter, and specify how many items to display per pagelimitParameter.

For example, if we want to display the article model on the article list pagemoduleId="1"The articles under this section, and 10 articles per page, can be written as follows:

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

Here,archivesIt is a variable name we customize, which will carry the list of document data contained in the current page. You can adjust it according to your actual situation.moduleIdFor example, the product list may bemoduleId="2"），even throughcategoryIdto specify a particular category of documents.

Step 2: Display the content of the current page's document

Get the document data of the current pagearchivesAfter that, we can utilizeforLoop tags to iterate and display the detailed information of each document.In the loop, you can easily access various fields such as the title, link, summary, publishing time, and reading volume of each document.

An example of 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 %}

Here we useditem.LinkGet the document link,item.Titleto get the title,item.DescriptionGet the overview.stampToDateTags can help us format timestamps into easily readable dates. IfarchivesThe list is empty,{% empty %}The content in the label will be displayed, which helps 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 through page numbers to jump to other pages. At this point,paginationtags come into play. It automatically identifiesarchiveListTag-generated pagination data, and render out “Home page”, “Previous page”, “Next page”, and specific page number.

We usually willpaginationPlace the tag onarchiveListBelow the label, ensure that users can easily find the navigation after the document content is displayed.paginationLabels can accept ashowParameter used to control how many page number digits are displayed in page navigation.

For example, display navigation with 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 above code,pagesYespaginationThe variable provided by the label, which contains all the information related to pagination, such as:

  • pages.TotalItems: Total number of documents.
  • pages.CurrentPage：Current page number.
  • pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPage: Represent the links and names of the first page, last page, previous page, and next page.pages.FirstPage.LinkGet the link address,pages.FirstPage.NameGet the displayed text.
  • pages.Pages: This is an array containing all the intermediate page number links, we can loop through{% 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 the user is visiting, so that we can highlight the current page.activeHighlight the style.

Combine these tags and integrate them with the CSS styles of your website, and you will have a fully functional and aesthetically pleasing document list pagination navigation built.This design concept of Anqi CMS aims to enable content operators to achieve powerful website functions with the minimum cost of learning.

Common Questions and Answers (FAQ)

问：After pagination, will the URL structure of the website change?

Answer: Yes.When you enable the pagination feature on the document list, AnQiCMS will automatically add the page number parameter to the URL of the list page./article/list.htmlThen the URL of the second page might become/article/list-2.htmlOr it might 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 than the document list be paginated?

答：Of course. The Anqi CMS is.paginationTags are universal pagination navigation generators. Any that supporttype="page"parameter list tags, such astagDataList