How to implement pagination for article lists and limit the number of items per page?

In website operation, especially when managing a large amount of content, the pagination display of the article list is an indispensable function.It not only makes it easier for users to browse content, avoids the problem of too much data loading on a single page and slowing down the speed, but also improves the overall user experience and SEO friendliness of the website.In AnQi CMS, implementing the pagination display of article lists and flexible control of the number of items per page is very intuitive.

Next, we will explore how to implement pagination in the Anqi CMS template and limit the number of articles displayed per page.

Efficient content management: Implementing article list pagination

AnQi CMS provides powerful template tag features, among whicharchiveListTags are used to retrieve lists of articles (or other content models). To implement pagination, we first need to tellarchiveListLabel, we want a paginated list, not a simple fixed quantity list.

This can be done byarchiveListSet in the labeltype="page"Implement the parameters. For example, on a category list page (usually corresponding to the template directory){模型table}/list.htmlfile), you can retrieve the article list in the following way:

{% archiveList archives with type="page" %}
    {% for item in archives %}
        <div class="article-item">
            <h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
            <p>{{item.Description}}</p>
            <div class="meta-info">
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </div>
        </div>
    {% empty %}
        <p>该分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

In this code block,archivesThis is the variable name defined, used to store the article list data obtained.type="page"The parameter informs the system that this list needs to support pagination.for item in archivesThen iterate over each article and display its title, description, publication date, and reading volume information.emptyTags are a very practical feature, which displays alternative content when the list is empty, preventing the page from being blank.

Fine control: limit the number of articles per page.

Whentype="page"After enabling the pagination feature, we still need a parameter to control the number of articles displayed per page, which islimitParameter.limitThe parameter allows you to set an integer value to precisely define the number of articles displayed per page.

For example, if you want to display 10 articles per page, you canarchiveListthe tag withlimit="10":

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
            <p>{{item.Description}}</p>
            <div class="meta-info">
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </div>
        </div>
    {% empty %}
        <p>该分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

By adjustinglimitThe value, you can easily control the density of the content on each page to adapt to different design styles or user reading habits.For example, a blog post list may want to display more per page (such as 15-20 articles), while a product display list may need fewer items to highlight the details of each product (such as 6-8 items).

Navigation and User Experience: Implement Pagination Control

Just displaying the list of articles and limiting the number is not enough; users also need an intuitive pagination navigation to switch pages. Anqi CMS provides specialpaginationLabel. This label can automatically match the current URL andarchiveListGenerated pagination information, rendering complete 'Home', 'Previous page', 'Next page', 'End page' and page number links in the middle.

paginationTags are usually witharchiveListLabels should be used together, and a variable name needs to be defined to receive pagination data, for examplepagesOne of the commonly used parameters isshowIt can control the maximum number of page number buttons displayed in the middle page area.

Here is a complete pagination navigation code example:

<div class="pagination-container">
    {% pagination pages with show="5" %}
        <ul class="pagination-list">
            {# 首页链接 #}
            <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 item in pages.Pages %}
                <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                    <a href="{{item.Link}}">{{item.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>
        <div class="pagination-info">
            总共 <b>{{pages.TotalItems}}</b> 篇文章，当前第 <b>{{pages.CurrentPage}}</b> 页 / 共 <b>{{pages.TotalPages}}</b> 页
        </div>
    {% endpagination %}
</div>

In the above code,pagesThe variable contains all information related to pagination, such aspages.FirstPage.LinkGet the link to the home page,pages.CurrentPageindicating the current page number.IsCurrentThe attribute is a very convenient boolean value, which returnstruewhen a certain page number is the current page, allowing you to add it via CSS.activeHighlight the current page number to enhance user experience.

Comprehensive practice: complete pagination code for article list

toarchiveListandpaginationCombine the tags and you can implement a fully functional and easy-to-manage article list pagination in AnQi CMS. Usually, this code is placed in the template of your website.{模型table}/list.htmlFor example, inside the filearticle/list.html.

Here is an integrated example:

`twig {# Assuming this is the template file for the article category list page, such as: /template/default/article/list.html #}

{% extends 'bash.html' %} {# Inherit basic layout file #}

{% block content %}

<h1 class="mb-4">
    {% categoryDetail with name="Title" %}
</h1>

<div class="article-list-wrapper">
    {% archiveList archives with type="page" limit="10" %} {# 获取分页文章列表，每页10篇 #}
        {% for item in archives %}
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="{{item.Link}}">{{item.Title}}</a>
                </h5>
                <p class="card-text">{{item.Description}}</p>
                <p class="card-text-sm text-muted">
                    <small>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</small>
                    <small class="ms-3">阅读量：{{item.Views}}</small>
                </p>
            </div>
        </div>
        {% empty %}
        <div class="alert alert-info" role="alert">
            该分类下暂时没有文章。
        </div>
        {% endfor %}
    {% endarchiveList %}
</div>

{# 分页导航区域 #}
<nav aria-label="Page navigation" class="mt-4">
    {% pagination pages with show="5" %} {# 显示5个页码按钮 #}
        <ul class="pagination justify-content-center">
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{pages.FirstPage.Link}}" aria-label="首页">首页</a>
            </li>
            {% if pages.PrevPage %}
            <li class="page-item">
                <a class="page-link" href="{{pages.PrevPage.Link}}" aria-label="上一页">上一页</a>
            </li>
            {% endif %}
            {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{item.Link}}">{{item.Name}}</a>
            </li>
            {% endfor %}
            {% if pages.NextPage %}
            <li class="page-item">
                <a class="page-link" href="{{pages.NextPage.Link}}" aria-label="下一页">下一页</a>
            </li>
            {% endif %}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{pages.Last