How to add basic pagination tags correctly to the article list in AnQiCMS?

This article will focus on the core functions of AnQi CMS, and will explain in detail how to correctly introduce and configure pagination tags on the article list page to ensure that your website content is presented to visitors in the most user-friendly manner.

Insight into the pagination philosophy of Insight CMS

In the template system of AnQi CMS, the implementation of pagination is not an independent, static element, but a dynamic process closely coordinated with the content list tags.It follows the logic of 'fetch data first, then show pagination'.This means that we need to first obtain the article data that needs to be displayed in pagination through specific tags, and then we can build the pagination navigation on this basis.

The template syntax of Insight CMS draws on the concise style of Django template engine, focusing on the use of two types of tags:

• Variable tags{{ 变量名 }}：Used for outputting data.
• Logical tag{% 标签名 参数 %}：Used for controlling flow (such as loops, conditional judgments) or calling specific functional modules.

Understood this, we can start to implement pagination for the article list.

Step 1: ApplyarchiveListTag to get pagination data

To implement pagination, we first need to inform the CMS that we need to retrieve which articles, and these articles need to be displayed in a paginated manner. At this time,archiveListLabels come in handy.

archiveListIs a universal content list tag in AnQin CMS, it can filter and output articles, products, and other content based on various conditions. For the pagination feature, one of its key parameters istype="page"). WhentypesetpagewhenarchiveListNot only returns article data, but also automatically generates the necessary information for pagination navigation.

Let's understand how to use it with a simple example:

{# 假设我们正在一个分类列表页，希望展示该分类下的文章，并进行分页 #}
{% archiveList archives with type="page" limit="10" %}
    {# articles 是一个数组，包含了当前页的所有文章 #}
    {% for item in archives %}
    <div class="article-item">
        <h2 class="article-title"><a href="{{item.Link}}">{{item.Title}}</a></h2>
        <p class="article-description">{{item.Description}}</p>
        <div class="article-meta">
            <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
            <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
        </div>
    </div>
    {% empty %}
    <p>当前分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

In the code block above:

• We go through{% archiveList archives with type="page" limit="10" %}Tell the CMS, we want to get the list of articles, and in a paginated form (type="page"), showing 10 articles per page (limit="10").
• archivesIt is a variable name we customize, which will carry the article data of the current page.
• for item in archivesIt loops through each article on the current page,itemThe variable represents a single article object, you can use it toitem.Title/item.LinkAccess various properties of the article in English.
• {% empty %}A block is a very practical feature, whenarchivesThe list is empty, it will displayemptythe content within the block to avoid a blank page.

archiveListThere are many other parameters, such asmoduleId(Specify the model ID),categoryId(specified category ID),order(sorting method) and others. You can configure them flexibly according to your actual needs. But remember, whenever it involves pagination,type="page"is indispensable.

Second step: UtilizepaginationLabel to build pagination navigation

WhenarchiveListBytype="page"is called, the security CMS will silently prepare all the data related to pagination in the background and pass it to the template. At this time, we can usepaginationLabels are used to display these data in a user-friendly manner.

paginationLabels are specifically used to render pagination navigation bars. It will receive a pagination information object.pagesThe object, and according to your configuration, generates the "Home

The followingpaginationTypical usage of the label:

{# 承接上一步的 archiveList 标签，分页标签通常紧随其后 #}
<div class="pagination-container">
    {% pagination pages with show="5" %}
        <ul>
            {# 显示总条数、总页数和当前页 #}
            <li>总数：{{pages.TotalItems}} 条，共 {{pages.TotalPages}} 页，当前第 {{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 %}
</div>

In this example:

• {% pagination pages with show="5" %}We define a variable namedpagesvariable to receive pagination information, and specifyshow="5"，means displaying up to 5 intermediate page number links.
• pagesThe object contains rich pagination metadata:
  • pages.TotalItems: Total number of articles.
  • pages.TotalPages: Total number of pages.
  • pages.CurrentPage：Current page number.
  • pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPage：Represent the objects of home page, end page, previous page and next page, they all containName(link text, such as “Home Page”)、Link(link address) andIsCurrent(Is it the current page) and other properties.
  • pages.Pages: This is an array that contains all the intermediate page number links that need to be displayed, each element also hasName/LinkandIsCurrentproperties.
• Pass{% if pages.PrevPage %}Such condition judgment, we can intelligently control the display of the 'Previous Page' and 'Next Page' buttons, avoiding invalid links on the first page or the last page.
• {% if item.IsCurrent %}active{% endif %}This pattern is often used to add a special CSS class to the current page number to highlight the page the user is on.

Complete example: Apply pagination to the article list.

Now, let us translate `archiveList