In website content operation, the pagination navigation on the article list page is a crucial 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 efficientpaginationLabels make it easy to implement this feature. Next, we will discuss in detail how to use the article list page of AnQiCMS.paginationTag implementation of pagination navigation function.

Understanding the core mechanism of pagination navigation.

The implementation of pagination navigation in AnQiCMS mainly depends on the collaborative work of two core template tags:archiveListThe tag is used to retrieve a list of article data from the database,paginationthe tag is responsible for,archiveListrendering the pagination links on the user interface based on the generated pagination information.

To ensure that these two labels work well together, the key isarchiveLista specific parameter of the label:type="page"). WhenarchiveListsettype="page"When it is used, it not only retrieves the specified number of articles but also calculates a series of data required for pagination such as the total number of articles, total number of pages, current page number, and encapsulates these data intopagesobject.pagesobject, ispaginationtag for pagination navigation rendering data source.

First step: prepare the article list data (archiveList)

Firstly, we need to be in the article list page template file (for example:archive/list.htmlortag/list.html), usearchiveListLabel to get article data and inform the system that pagination is needed.

You can call it in the following way in your template.archiveList:

{% 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 defines a variable namedarchivesVariable to store article data. Where:

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

WhenarchiveListBytype="page"When running the pattern, it will automatically generate a globally accessiblepagesvariable (if you haven'tarchiveListdefined a variable name, thenpaginationthe label can be used directlypagesvariable; if a variable is defined as in the examplearchives, thenpaginationThe label will be usedpagesVariables, this is an internal agreement of AnQiCMS). ThispagesThe variable will contain all the information required for pagination.

Step 2: Import pagination navigation (pagination)

接下来，在archiveListThe external part of the label block (usually at the bottom of the article list), we can usepaginationLabels to render pagination navigation.

<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 label block:

  • pages：This isarchiveListTags intype="page" modes automatically generate objects containing pagination information.
  • 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 get the total number of entries, total number of pages, and current page number.
  • pages.FirstPage,pages.LastPage,pages.PrevPage,pages.NextPageThese are objects containing links to home page, last page, previous page, and next page. They have anLink(link address) andName(display name, such as "home page", "previous page") attribute, as well asIsCurrentProperty to determine whether it is the current page.
  • pages.Pages: This is an array that contains the links to the middle page numbers. We through{% for item in pages.Pages %}looping through it,item.LinkProvide page link,item.NameProvide page number digits,item.IsCurrentUsed to mark the current page.

Complete code example

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

English

<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