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 feature.It not only allows users to browse content more conveniently, avoiding the slow speed caused by loading too much data on a single page, but also improves the overall user experience and SEO friendliness of the website.In Auto CMS, achieving 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 for article lists in the Anqi CMS template and limit the number of articles displayed per page.

Efficient content management: Implement article list pagination

Anqi CMS provides powerful template tag functions, wherearchiveListThe tag is used to retrieve the list of articles (or other content models). To implement pagination, we first need to tellarchiveListTags, we want a paginated list, not a simple fixed number of items.

This can be done byarchiveListsetting in the labeltype="page"The parameter to be implemented. For example, on a classification list page (usually corresponding to the template directory), you can use the following method to get the list of articles:{模型table}/list.htmlfile), you can use the following method to get the list of articles:

{% 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,archivesThis is the variable name defined by us, used to store the data of the retrieved article list.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, publish date, and reading volume information.emptyThe label is a very practical feature, which displays alternative content when the list is empty, avoiding a blank page.

Fine control: Limit the number of articles per page

Whentype="page"Enable pagination feature, we also 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 canarchiveListtag.limit="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 content per page to adapt to different design styles or reading habits of users.For example, a blog post list may want to display more items per page (such as 15-20), while a product display list may need fewer items to highlight the details of each product (such as 6-8).

Navigation and User Experience: Implement Pagination Control

Just displaying the article list and limiting the number is not enough, users also need an intuitive pagination navigation to switch pages. Anqi CMS provides a specialpaginationLabel. This label can automatically adjust according to the current URL andarchiveListGenerated pagination information, rendering the complete 'Home', 'Previous Page', 'Next Page', 'End Page' as well as the middle page number links.

paginationTags are usually witharchiveListTags should be used together, and a variable name needs to be defined to receive pagination data, for examplepagesOne commonly used parameter isshowIt can control the maximum number of page buttons displayed in the middle page number 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 of the homepage,pages.CurrentPagerepresents the current page number.IsCurrentThe property is a very convenient boolean value, when a certain page number is the current page, it will returntrue, which allows you to add it via CSS.activeEnglish, thus highlighting the current page number to improve user experience.

Comprehensive Practice: Complete pagination code for article list

toarchiveListandpaginationTags combined, you can implement a fully functional and easy-to-manage article list pagination in the Anqi CMS. Typically, these codes are placed in the template of your website.{模型table}/list.htmlIn the file, for examplearticle/list.html.

The following is an integrated example:

English

{% 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