How to implement pagination in the content list?

When managing website content, especially when the amount of content increases, an intuitive and efficient pagination feature becomes particularly important.It not only allows visitors to find the information they need faster, improves the browsing experience, but also avoids performance issues caused by loading too much content on a single page.In the AnQi CMS, implementing the pagination feature for the content list is both flexible and direct, which can be configured in just a few simple steps.

The AnQi CMS adopts the Django template engine syntax, allowing you to control the display logic of content through clear tags. To add pagination to your content list, we mainly use two core tags: one for retrieving the content list.archiveList（或其他类似的内容列表标签），as well as specifically used for generating pagination navigationpaginationLabel.

Prepare your content list tags

Firstly, we need to determine which list needs to be displayed with pagination in the template file. For example, when dealing with the most common article list, you will usearchiveListLabel to retrieve content from the database. The key is that you need to tellarchiveListThis is a paginated list, and specify how many items to display per page.

You can use thetypeparameter settings"page"and utilizelimitParameters are used to define the number of items per page. For example, if you want to display 10 articles per page, you can set it like this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <article>
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <time>{{stampToDate(item.CreatedTime, "2006-01-02")}}</time>
        </article>
    {% empty %}
        <p>抱歉，目前没有内容可以显示。</p>
    {% endfor %}
{% endarchiveList %}

In this code,archiveListTags store the list data of content inarchivesvariables, forforLoop through and display.type="page"The settings, will simultaneously generate a namedpagespagination object, which is the key to the pagination navigation we will implement next.

introduce pagination tags

With the data list and pagination object, you can add pagination navigation at the bottom of the page or at a suitable position. You need to passpaginationtags, andarchiveListgeneratedpagesan object to it.

pagination标签非常智能，它会自动根据当前的页码、总页数以及内容列表标签的URL结构来生成正确的翻页链接。您可以利用show参数来控制在分页导航中显示多少个页码按钮，例如show="5"会显示当前页附近的5个页码。

pages对象包含了一系列有用的属性，比如FirstPage(Home page),PrevPage(Previous page),Pages(Page number list) ,NextPage（下一页）和LastPage（End page）。Each page number element (including)FirstPage/PrevPage) hasName(display text),)Link("link address"), andIsCurrent(whether it is the current page) and other properties, for easy and flexible style control.

The following is a basic pagination navigation example:

<nav class="pagination-nav">
    {% pagination pages with show="5" %}
        {# 首页按钮，当处于首页时会应用active样式 #}
        <a href="{{pages.FirstPage.Link}}" class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}">首页</a>

        {# 上一页按钮，只有当存在上一页时才显示 #}
        {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}" class="page-link">上一页</a>
        {% endif %}

        {# 中间页码列表，遍历显示每个页码 #}
        {% for item in pages.Pages %}
            <a href="{{item.Link}}" class="page-link {% if item.IsCurrent %}active{% endif %}">{{item.Name}}</a>
        {% endfor %}

        {# 下一页按钮，只有当存在下一页时才显示 #}
        {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}" class="page-link">下一页</a>
        {% endif %}

        {# 尾页按钮，当处于尾页时会应用active样式 #}
        <a href="{{pages.LastPage.Link}}" class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}">尾页</a>
        
        {# 您还可以显示总条数、总页数和当前页码 #}
        <span class="page-info">共 {{pages.TotalItems}} 条，{{pages.CurrentPage}}/{{pages.TotalPages}} 页</span>
    {% endpagination %}
</nav>

Integrated code snippet

Place the labels of the two parts in the same template file, and you can achieve a complete page content list. Usually, the content list (English)archiveListThe loop section) will be placed in the main area of the page, and the pagination navigation (paginationsection) will be placed below the content list.

For example, a typicallist.htmlThe structure of the template file may be as follows:

{# 假设这是您的文章列表页面模板 #}
{% extends 'base.html' %} {# 继承基础模板 #}

{% block content %}
    <div class="articles-list">
        {# 内容列表区域 #}
        {% archiveList archives with type="page" limit="10" %}
            {% for item in archives %}
                <article class="article-item">
                    <h2><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>
                    </div>
                </article>
            {% empty %}
                <p class="no-content">抱歉，目前没有内容可以显示。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>

    {# 分页导航区域 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <nav class="pagination-nav">
                <a href="{{pages.FirstPage.Link}}" class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}">首页</a>
                {% if pages.PrevPage %}
                    <a href="{{pages.PrevPage.Link}}" class="page-link">上一页</a>
                {% endif %}
                {% for item in pages.Pages %}
                    <a href="{{item.Link}}" class="page-link {% if item.IsCurrent %}active{% endif %}">{{item.Name}}</a>
                {% endfor %}
                {% if pages.NextPage %}
                    <a href="{{pages.NextPage.Link}}" class="page-link">下一页</a>
                {% endif %}
                <a href="{{pages.LastPage.Link}}" class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}">尾页</a>
            </nav>
            <div class="page-summary">
                当前第 {{pages.CurrentPage}} 页，共 {{pages.TotalPages}} 页，总计 {{pages.TotalItems}} 条内容。
            </div>
        {% endpagination %}
    </div>
{% endblock %}

{# 您还需要在样式文件中为 .pagination-nav 和 .page-link, .active 等类添加样式，以美化分页按钮 #}

By following these simple steps, you can in safety