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 AnQi CMS, implementing the pagination feature of the content list is flexible and direct, and can be configured with just a few simple steps.

AnQi CMS uses 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(or similar content list tags), as well as specifically used for generating pagination navigationpagination.

Prepare your content list tags

Firstly, we need to determine which list needs pagination display in the template file. For the most common article list, you will usearchiveListTag to retrieve content from the database. The key is that you need to tellarchiveListThis is a list that requires pagination and specifies how many items to display per page.

You can use totypethe parameter to"page"and utilizedlimitParameters 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 block,archiveListTags store content list data inarchivesvariables, forforLoop through and display.type="page"The settings will simultaneously generate a namedpagespagination object, which is the key to implementing pagination navigation next.

introducing pagination tags

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

paginationThe tag is very intelligent, it automatically generates the correct pagination links based on the current page number, total number of pages, and the URL structure of the content list tags. You can useshowThe parameter controls how many page number buttons are displayed in the pagination navigation, for exampleshow="5"It will display the 5 page numbers around the current page.

pagesThe object contains a series of useful properties, such asFirstPage(Home page),PrevPage(Previous page),Pages(Middle page number list),NextPage(Next page) andLastPage(End page). Each page number element (includingFirstPage/PrevPageetc.) hasName(Display Text),Link(link address) andIsCurrent(Is it the current page) properties, for flexible style control.

Here is an example of a basic pagination navigation:

<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 to achieve a complete pagination content list. Usually, the content list (archiveListThe part in the loop will be placed in the main area of the page, while the pagination navigation (paginationpart) will be placed below the content list.

For example, a typicallist.htmltemplate file structure might look like this:

{# 假设这是您的文章列表页面模板 #}
{% 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 secure in the company