How to implement pagination display of content lists in AnQi CMS?

In Anqi CMS, the pagination display of the content list is one of the key functions to improve user experience, optimize website performance, and facilitate content management.AnQi CMS, with its flexible template tags and powerful content management capabilities, provides us with a simple and efficient way to meet this requirement.

The importance of displaying pagination in content lists

Imagine if your website had tens of thousands of articles, products, or comments all displayed on one page, not only would it make the page load speed incredibly slow, but it would also make users lose their way in the vast amount of information.The pagination display can split a large amount of content reasonably into multiple pages, greatly reducing the burden on a single page, optimizing the loading speed, and also allowing users to browse as needed, improving the overall user experience.For search engines, a clear pagination structure also helps them better understand and index website content.

The Anqi CMS template engine is designed to be intuitive and easy to use, it adopts syntax similar to the Django template engine, through specific tags({% tag %}）to handle logic, and use double curly braces（{{ variable }}）to output variables, making it easy for even users without a strong development background to get started quickly.

Core tags:archiveListwithpagination

In Anqi CMS, the implementation of content list pagination depends mainly on two core template tags:

1. archiveListDocument List Tags: is used to retrieve and display the document content list.
2. paginationPagination LabelUsed for rendering pagination navigation links, allowing users to jump between different pages.

Below, we will step by step introduce how to combine these two tags to achieve pagination display of content lists.

First step: usearchiveListTag to get pagination data

archiveListTags are the main tool you use to get a list of articles, products, and other content. To implement pagination, you need to specify the pagination behavior throughtypeandlimitthe parameter:

• type="page"This parameter tells Anqi CMS that you want to retrieve a list that can be paginated. The system will use the page number parameter in the current page URL (such as?page=2) Auto-adjust the returned data.
• limit="N": This parameter defines how many items are displayed per page. For example,limit="10"This means 10 items are displayed per page.

Here is a basicarchiveListLabel usage example, used to obtain the article model (moduleId="1") content list, ready for pagination, displaying 10 items per page:

{% archiveList archives with type="page" moduleId="1" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p class="summary">{{ item.Description }}</p>
            <div class="meta">
                <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量: {{ item.Views }}</span>
                <span>分类: <a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
            </div>
        </div>
    {% empty %}
        <p>抱歉，当前分类或搜索条件下暂无内容。</p>
    {% endfor %}
{% endarchiveList %}

In the code above:

• archivesIs your custom variable name, used to store the list of obtained documents.
• moduleId="1"Represents the content under the article model with ID 1. You can adjust it according to your own content model ID.
• item.Link/item.Title/item.DescriptionisarchivesCommon properties of each document item. You can also accessitem.Views(Views),item.Thumb(thumbnail) and more properties.

Second step: usepaginationThe label renders pagination navigation

InarchiveListAfter the tag, you need to usepaginationLabel to generate pagination navigation bar. This label will automatically handle the current page number, total number of pages, and generate correct page link links, etc.

• show="N"This parameter is used to control how many page number digits are displayed on the pagination navigation bar, in addition to the first page, last page, previous page, and next page. For example,show="5"It will display the current page and nearby 5 page numbers in the navigation.

The following is a standard and fully functionalpaginationLabel usage example:

<div class="pagination-container">
    {% pagination pages with show="5" %}
        <ul>
            <li class="info">总共：{{ 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 pageItem in pages.Pages %}
                <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                    <a href="{{ pageItem.Link }}">{{ pageItem.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 the above code:

• pagesIspaginationVariable generated by the tag, which contains all the data related to pagination.
• pages.TotalItems/pages.TotalPages/pages.CurrentPageThey represent the total number of items, total pages, and the current page number.
• pages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPageThey are objects that includeName(Link text, such as "Home", "Previous page") andLink(Jump links).
• pages.Pagesis an array that contains the page numbers in the middle section, you need toforloop through it to display each page number.pageItem.IsCurrentCan determine if the current page number is the current page, convenient for you to add highlight styles.

Combined example: complete pagination display code

Combine these two tags and you can implement a complete content list pagination function in the AnQi CMS template. Usually, such code is placed on the category list page ({模型table}/list.html) or search results page (search/index.html).

``twig <!DOCTYPE html>

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %} - {% system with name="SiteName" %}</title>
<style>
    /* 简单的分页样式，您可以根据网站设计自由调整 */
    .pagination-container ul {
        list-style: none;
        padding: 0;
        display: flex;
        justify-content