How to implement pagination functionality in Anqi CMS and customize the display style of page numbers?

In AnQi CMS, the pagination feature of website content is an indispensable part of improving user experience and optimizing the site structure.Whether it is a blog article list, product display page, or other dynamic content, reasonable pagination can make it easier for users to browse a large amount of information, and it can also help search engines better understand and crawl website content.Today, let's delve deeper into how to implement pagination functionality in AnQiCMS and customize the display style of page numbers according to your needs.

Why do we need pagination?

Imagine that your website has hundreds or thousands of excellent articles.If there is no pagination, all articles will pile up on one page, not only will it load slowly, but users will also find it difficult to find the content they are interested in, and they will leave quickly.The purpose of pagination is to divide the content into multiple smaller pages, making page loading faster, navigation clearer, and the user experience naturally better.At the same time, a clear pagination structure is also helpful for search engines to understand the hierarchy of website content, improving the efficiency of inclusion.

How to implement pagination in AnQiCMS

AnQiCMS provides a set of intuitive and flexible template tags to handle content lists and pagination display. The core lies in the cooperation of two tags:Content list tag(such asarchiveList), andPagination Label(pagination)

Step 1: Prepare the content list that needs pagination

In your template file (for examplelist.htmlorindex.html)，Firstly, you need to use the content list tag to get the paginated content. Here, we take the example of getting the article list, usingarchiveListtag. The key is to settype="page"Parameters, this will tell AnQiCMS to prepare pagination data for this list. At the same time, throughlimitParameters can be used to control how many items are displayed per page.

A typical way to get a content list may be as follows:

{# 假设我们正在获取ID为1的文章分类下的内容，每页显示10条 #}
{% archiveList archives with categoryId="1" type="page" limit="10" %}
    <div class="article-list">
        {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <div class="meta">
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </div>
        </div>
        {% empty %}
        <p>抱歉，目前该分类下没有任何文章。</p>
        {% endfor %}
    </div>
{% endarchiveList %}

In the code above,archivesIt is the variable we define, which contains all the article data on the current page.type="page"It is the key to enabling pagination,limit="10"which specifies displaying 10 articles per page.

Step two: Insert pagination tags and understand the variables they provide

Below the content list, use them immediatelypaginationTags to render pagination navigation. This tag will be based on the previousarchiveListGenerated pagination data, automatically outputs page number information.

<div class="pagination-container">
    {% pagination pages with show="5" %}
        {# 在这里构建您的分页样式 #}
    {% endpagination %}
</div>

HerepagesIt is also a custom variable name, it contains all the data related to pagination.show="5"This parameter indicates that up to 5 page number buttons are displayed before and after the current page, making the pagination navigation look cleaner.

pagesVariables provide rich data, allowing you to flexibly customize the pagination style:

• pages.TotalItems: Total number of items.
• pages.TotalPages: Total number of pages.
• pages.CurrentPageCurrent page number.
• pages.FirstPage: Home object, includingName(such as 'Home' or '1'),Link(link address) andIsCurrent(whether it is the current page).
• pages.LastPage: End page object, structure andFirstPageSimilar.
• pages.PrevPage: The previous page object, structure andFirstPagesimilar, if it is the first page, it is empty.
• pages.NextPage: The next page object, structure andFirstPagesimilar, if it is the last page, it is empty.
• pages.Pages: An array that contains the middle page number list, each element is an object, similarly containingName(page number),LinkandIsCurrent.

Step 3: Customize the page number display style

NowpagesThese data provided by the variable allow you to build any pagination style you want using HTML and CSS. Usually, we would useforLoop throughpages.Pagesto display the middle page numbers and combineifThe statement to determine the status of the current page, first page, last page, previous page, and next page, and add different CSS classes.

Here is a commonly used pagination style code example, you can modify the HTML structure and CSS class names according to your website design.

{# 假设我们已经通过 archiveList 获取了内容，现在开始渲染分页 #}
<div class="pagination-wrapper">
    {% pagination pages with show="5" %}
    <ul class="pagination">
        {# 显示总页数和当前页码信息，这部分您可以选择显示或隐藏 #}
        <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}}" class="page-link">{{pages.FirstPage.Name}}</a>
        </li>

        {# 上一页链接 #}
        {% if pages.PrevPage %}
        <li class="page-item">
            <a href="{{pages.PrevPage.Link}}" class="page-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}}" class="page-link">{{item.Name}}</a>
        </li>
        {% endfor %}

        {# 下一页链接 #}
        {% if pages.NextPage %}
        <li class="page-item">
            <a href="{{pages.NextPage.Link}}" class="page-link">{{pages.NextPage.Name}}</a>
        </li>
        {% endif %}

        {# 末页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}" class="page-link">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    {% endpagination %}
</div>

By usinglioratagsactive/disabledClasses, you can then use in your stylesheet (for examplepublic/static/css/style.cssDefine their visual representation, such as changing the background color, font color, etc., to achieve a pagination style that fully conforms to your website's style.

Comprehensive example: article list and pagination

Combining the above two parts, the pagination function of a complete article list page is implemented.

``twig <!DOCTYPE html>

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">
<style>
    /* 简单的分页样式示例，您可以根据需要进行扩展和修改 */
    .pagination-wrapper {
        margin-top: 30px;
        text-align: center;
    }
    .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 20px 0;
        border-radius: 4px;
    }
    .pagination > li {