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

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

The importance of content list pagination display

Imagine if your website had thousands of articles, products, or comments all displayed on one page. Not only would this make the page load incredibly slowly, but it would also cause users to get lost in the vast sea of information.分页显示则能够将大量内容合理地拆分成多个页面，大大减轻了单个页面的负担，优化了加载速度，同时也让用户能够按需浏览，提升了整体的用户体验。For search engines, a clear pagination structure also helps them better understand and index website content.

The template engine of Anqi CMS 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, which makes it easy for users without a strong development background to quickly get started.

Core tags:archiveListWithpagination

In the AnQi CMS, the pagination display of content lists mainly relies on two core template tags:

1. archiveListDocument list label: Used to obtain and display the document content list.
2. paginationPagination tab：Used to render pagination navigation links, allowing users to navigate between different pages.

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

Step 1: UsearchiveListTag to get pagination data

archiveListLabels are your main tool to get lists of articles, products, and other content. To implement pagination, you need to specify the pagination behavior through itstypeandlimitparameters:

• type="page"This parameter tells the CMS that the data you want to retrieve is a list that can be paginated. The system will base the pagination on the current page number parameter in the URL (such as?page=2）English adjustment of the returned data.
• limit="N"：This parameter defines how many items are displayed per page. For example,limit="10"means 10 items are displayed per page.

The following is a basicarchiveListLabel usage example, used to obtain the article model (moduleId="1") under the content list, and prepare 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 above code:

• archivesIt is the variable name you define, used to store the list of retrieved documents.
• moduleId="1"Represents the content under the article model with ID 1. You can adjust it according to your content model ID.
• item.Link/item.Title/item.DescriptionEnglish isarchivescommon properties of each document item in the list. You can also accessitem.Views（Views）、item.Thumb(thumbnail) and more properties.

Step 2: Usepaginationtag rendering pagination navigation

InarchiveListafter the tag, you need to usepaginationThis tag is used to generate pagination navigation bars. This tag will automatically handle the current page number, total number of pages, and generate correct page links, etc.

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

The following is a standard and feature-completepaginationLabel 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:

• pagesYespaginationThe variable generated by the label contains all the data related to pagination.
• pages.TotalItems/pages.TotalPages/pages.CurrentPageIt represents the total number of items, total pages, and current page number.
• pages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPageAll are objects, containingName(link text, such as "Home", "Previous Page") andLink(jump link).
• 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 the above two tags, and you can implement a complete content list pagination display function in the Anqi CMS template. Usually, such code is placed in the category list page ({模型table}/list.html) Or search results page (search/index.html) In templates like this.

`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