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

In the digital age where content is king, the content list of a website serves as the primary entry point for users to explore information and understand products.A well-designed, smooth experience article list can not only effectively improve the user's stay time on the website, but also help users quickly find the information they need through accurate navigation guidance.AnQiCMS (AnQiCMS) is an efficient and flexible content management system that deeply understands this field, providing website operators with powerful and easy-to-use template tag functions, among which adding basic pagination to the article list is a key link to improve user experience and website accessibility.

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 friendly manner possible.

The pagination philosophy of AnQi CMS

In the AnQi CMS template system, the implementation of the pagination function is not an independent, static element, but a dynamic process closely coordinated with the content list tag.It follows the logic of

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

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

Understood, we can then start working on adding pagination to the article list.

Step 1: Apply.archiveListTag to get pagination data

To implement pagination, we first need to inform AnQi CMS which articles to retrieve, and these articles need to be displayed in pages. At this time,archiveListthe label comes into play.

archiveListIs an all-purpose content list tag in AnQi CMS, which can filter and output articles, products, and other content according to various conditions. One key parameter for its pagination function istype="page". Whentypeis set topagethen,archiveListNot only does it return the article data, but it 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 above code block:

• We pass{% archiveList archives with type="page" limit="10" %}Tell AnQi CMS, we want to get the list of articles and in the form of pagination (type="page"), displaying 10 articles per page (limit="10")
• archivesIt is a variable name we define, 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 this way.
• {% empty %}Block is a very practical feature, whenarchivesIf the list is empty, it will displayemptyContent within the block, avoid blank pages.

archiveListThere are many other parameters, such as.moduleId(Specify Model ID),categoryId(specified category ID),order(Sorting method) and so on, you can flexibly configure according to your actual needs. But remember, whenever it involves pagination,type="page"it is indispensable.

Second step: usepaginationThe label constructs pagination navigation

WhenarchiveListStart withtype="page"After the form is called, Anqi CMS will silently prepare all the data related to pagination in the background and pass it to the template. At this point, we can usepaginationTags to display these data in a user-friendly manner.

paginationTags specifically used to render pagination navigation bars. It receives pagination information.pagesAn object, and according to your configuration, generates links such as 'Home', 'Previous Page', 'Next Page', and page number links in the middle.

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"It indicates that up to 5 middle page number links can be displayed.
• 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: Representing the objects for home page, last page, previous page, and next page, they all containName(Link text, such as 'Home'),Link(link address) andIsCurrent(Is it the current page) and other properties.
  • pages.Pages: This is an array that contains all the middle page number links that need to be displayed, each element also hasName/LinkandIsCurrentProperty.
• By{% if pages.PrevPage %}Such conditional judgment, we can intelligently control the display of the "Previous Page" and "Next Page" buttons to avoid 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's translate `archiveList