Why do we need pagination?

How to implement pagination in AnQiCMS

AnQiCMS provides a set of intuitive and flexible template tags for handling content lists and pagination display. The core lies in the coordinated use of two tags:Content list tag(such asarchiveList) andPagination tab(pagination).

Step 1: Prepare the content list that needs to be paginated.

In your template file (for example)list.htmlorindex.htmlFirstly, you need to use the content list tag to get the content that needs to be paginated. Here, we take the article list as an example to usearchiveListLabel. The key is to settype="page"The parameter will tell AnQiCMS to prepare pagination data for this list. At the same time, throughlimitThe parameter to control how many items are displayed per page.

An example of how to obtain a typical 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 above code,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"Then it specifies that 10 articles are displayed per page.

Step 2: Insert pagination tags and understand the variables they provide.

Below the content list, use it immediately after.paginationLabel to render pagination navigation. This label will be based on the previousarchiveListAutomatically output page number information based on the generated pagination data.

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

Here are thepagesIt is also a custom variable name, which includes all the data related to pagination.show="5"This parameter indicates that up to 5 page buttons are displayed before and after the current page number, making the pagination navigation look simpler.

pagesThe variable provides rich data, allowing you to flexibly customize the pagination style:

  • pages.TotalItems: Total number of contents.
  • pages.TotalPages: Total number of pages.
  • pages.CurrentPage: Current page number.
  • pages.FirstPage: The first page object, includingName(such as “First Page” or “1”),Link("link address"), andIsCurrent(Is the current page).
  • pages.LastPage: English end object, structure withFirstPagesimilar.
  • pages.PrevPage: English previous object, structure withFirstPagesimilar, if it is the first page, it is empty.
  • pages.NextPage: English next object, structure withFirstPageSimilar, if it is the last page, it is empty.
  • pages.Pages: An array that contains the list of middle page numbers, each element is an object, similarly containingName：(page number),LinkandIsCurrent.

Third step: Customize the display style of page numbers

HencepagesThese data provided by the variable allow you to use HTML and CSS to build any pagination style you want. Usually, we would useforto iteratepages.Pagesto display the middle page number and combineifTranslate the statement to determine the current page, first page, last page, previous page, and next page status, and add different CSS classes.

The following is an example of a commonly used pagination style code, 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 setting alioraLabel addactive/disabledClasses in CSS, you can in your stylesheet (for examplepublic/static/css/style.css）Defined in them, their visual representation, such as changing the background color, font color, etc., to achieve a pagination style that fully conforms to your website style.

Comprehensive Example: Article List and Pagination

Combine the above two parts, and 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 {