In website content operation, the pagination navigation on the article list page is a key link to enhance user experience and optimize search engine crawling efficiency. AnQiCMS, as a feature-rich enterprise-level content management system, provides us with a concise and efficient one.paginationTags make it easy to implement this feature. Next, we will discuss in detail how to use it in the article list page of AnQiCMS, utilizingpaginationThe tag implements the pagination navigation function.

Understand the core mechanism of pagination navigation.

In AnQiCMS, the implementation of pagination navigation mainly relies on the collaborative work of two core template tags:archiveListTags are used to retrieve a list of articles from the database, andpaginationtags are responsible for based onarchiveListthe generated pagination information, rendering pagination links on the user interface.

To ensure that these two tags work well together, the key isarchiveLista specific parameter of the tag:type="page". WhenarchiveListis set totype="page"At the same time, it not only retrieves the specified number of articles, but also calculates the total number of articles, total number of pages, current page number, and a series of pagination required data, and encapsulates them into apagesobject. thispagesThe object is indeedpaginationThe data source for pagination navigation rendering of tags.

Step 1: Prepare article list data (archiveList)

First, we need to place in the template file of the article list page (for example:archive/list.htmlortag/list.htmlUse it inarchiveListLabel to retrieve article data and inform the system that pagination is required.

In your template, you can use the following method to callarchiveList:

{% archiveList archives with type="page" limit="10" %}
    {# 在这里循环显示文章列表内容 #}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            <h2>{{item.Title}}</h2>
            <p>{{item.Description}}</p>
            <small>{{stampToDate(item.CreatedTime, "2006-01-02")}} | 阅读量: {{item.Views}}</small>
        </a>
    </div>
    {% empty %}
    <p>当前分类下还没有文章哦。</p>
    {% endfor %}
{% endarchiveList %}

Here, we usearchiveListA tag defined a namedarchivesvariable to store article data. Among them:

  • type="page": Clearly inform the system that this list needs to be paginated.
  • limit="10": Specify the number of articles to be displayed per page as 10. You can adjust this number according to your actual needs.

WhenarchiveListStart withtype="page"When the pattern runs, it will automatically generate a globally availablepagesvariable (if you do not providearchiveListdefine a variable name, thenpaginationthe tag can be used directlypagesvariable; if defined as in the examplearchives, thenpaginationtags will be usedpagesVariable, this is the internal agreement of AnQiCMS). ThispagesThe variable will contain all the information needed for pagination.

Step two: introduce pagination navigation (pagination)

Next, inarchiveListThe block label (usually at the bottom of the article list), we can usepaginationTags to render pagination.

<nav class="pagination-container">
    {% pagination pages with show="5" %}
    <ul class="pagination-list">
        {# 显示总条数、总页数、当前页码等信息 #}
        <li class="info">共 {{pages.TotalItems}} 篇文章，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>

        {# 首页链接 #}
        {% if pages.FirstPage %}
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            </li>
        {% endif %}

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

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

in thispaginationIn the block:

  • pagesThis isarchiveListThe tag is intype="page"Automatically generated object containing pagination information in mode.
  • show="5"This parameter determines the maximum number of page buttons displayed at the same time in the pagination navigation (for example: 1, 2, 3, 4, 5 or …, 3, 4, 5, 6, …).You can adjust this value according to the interface design
  • pages.TotalItems,pages.TotalPages,pages.CurrentPage：Directly obtain the total number of entries, total pages, and current page number.
  • pages.FirstPage,pages.LastPage,pages.PrevPage,pages.NextPage：These are objects containing home page, last page, previous page, and next page links. They have inside them.Link(link address) andName(Display name, such as 'Home', 'Previous page') attribute, as well asIsCurrentattribute to determine whether it is the current page.
  • pages.Pages: This is an array that contains the middle page number links. We use{% for item in pages.Pages %}it in a loop,item.LinkProvide page link,item.NameProvide page number,item.IsCurrentUsed to mark the current page.

Complete code example

Combine the above two parts, and the template of a complete article list page with pagination navigation is roughly as follows:

"twig {# Assuming this is a template file named list.html #} &lt;!DOCTYPE html&gt;

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="description" content="{% tdk with name="Description" %}">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">


<header>
    <h1>{% tdk with name="Title" %}</h1>
</header>

<main class="container">
    <section class="article-list">
        {% archiveList archives with type="page" limit="10" %}
            {% for item in archives %}
            <article class="article-item">
                <a href="{{item.Link}}">
                    <h3>{{item.Title}}</h3>
                    <p>{{item.Description}}</p>
                    <div class="meta">
                        <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span>浏览量: {{item.Views}}</span>
                    </div>
                </a>
            </article>
            {% empty %}
            <p>当前分类下还没有文章哦。</p>
            {% endfor %}
        {% endarchiveList %}
    </section>

    {# 分页导航区域 #}
    <nav class="pagination-container">
        {% pagination pages with show="5" %}
        <ul class="pagination-list">
            <li class="info">共 {{pages.TotalItems}} 篇文章，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>

            {% if pages.FirstPage %}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
                </li>
            {% endif %}

            {% if pages.PrevPage %}
                <li class="page-item">
                    <a href="{{pages.PrevPage