How to implement pagination display of article lists in AnQiCMS and customize the style and logic of pagination navigation?

AnQiCMS as an efficient and flexible content management system provides intuitive and powerful functions in handling article lists and pagination display, making the content presentation meet user needs and satisfy various custom scenarios.If you are using AnQiCMS to build a website and want to implement pagination for the article list, and refine the style and logic of the pagination navigation, the following content will detail the implementation method.

Core feature:联动 of article lists and pagination tags

In AnQiCMS, the pagination display of the article list mainly depends on the close collaboration of two core template tags:archiveListwhich is used to obtain article data, whilepaginationis responsible for generating the pagination navigation.

Get article list:archiveListTag

archiveListTags are a powerful tool in AnQiCMS used to retrieve various documents (including articles, products, and custom model content). To implement pagination display, you need toarchiveListlabel'stypeThe parameter is explicitly set topage. This will inform the system that you expect it to return the data required for pagination, rather than just a fixed number of list items.

In configurationarchiveListAt the moment, some commonly used parameters can help you accurately control the logic of fetching articles:

• moduleId: Specify which content model's article list you want to fetch, such as article model (moduleId="1") or product model, etc.
• categoryIdGet articles by category ID.You can specify a single category ID, or separate multiple IDs with a comma.categoryId="0".
• limitThis determines the number of articles displayed per page, for examplelimit="10"It indicates that 10 articles are displayed per page.
• orderThis controls the sorting method of the articles, for example, sorted by the latest release time (order="id desc") Or sort by view count (order="views desc").
• q: Used for search functionality, whentypeWithpagethen,qThe parameters are automatically read from the URL to fetch the search keywords, thus achieving pagination of search results.

An example of a basic article list retrieval, without pagination navigation, it would look like this:

{# 假设我们正在获取文章模型下的文章列表，每页显示10篇 #}
{% archiveList archives with type="page" moduleId="1" limit="10" order="id desc" %}
    {% for item in archives %}
    <li>
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description|truncatechars:100 }}</p>
            <div>
                <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>浏览量：{{ item.Views }}</span>
            </div>
        </a>
    </li>
    {% empty %}
    <li>暂无相关文章。</li>
    {% endfor %}
{% endarchiveList %}

Building pagination navigation:paginationTag

paginationThe tag is a dedicated tool used by AnQiCMS for generating pagination navigation. It handles complex page number calculations and link generation logic, you just need to call it in the template and pass byarchiveListTag (set as)type="page"when generated)pagesvariables only.

paginationThe tag itself supports relatively few parameters, but its internalpagesvariables contain rich pagination information:

• show: Control the maximum number of page buttons displayed in pagination navigation, for exampleshow="5"It will display the maximum of 5 page numbers around the current page.
• pages.TotalItems: Total number of articles.
• pages.TotalPages: Total number of pages.
• pages.CurrentPage: The current page number.
• pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPageThese objects represent the links to the home page, last page, previous page, and next page, includingName(link text) andLink(link address), as well asIsCurrent(whether it is the current page).
• pages.PagesAn array containing a list of middle page numbers, each element is also an object, includingName/LinkandIsCurrent.

A basic pagination navigation generation example, which generates page number links:

<div class="pagination">
    {% pagination pages with show="5" %}
        <ul>
            {# 首页链接 #}
            <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>
    {% endpagination %}
</div>

Combine and customize: Implement complete article list pagination

toarchiveListandpaginationThese tags combined with HTML structure and CSS style can realize a complete and customizable pagination function for an article list. Usually, this code is placed in your list template file (such asarchive/list.html).

Here is a complete example of combining an article list with pagination navigation, showing how to organize HTML structure and utilizeIsCurrentproperties to highlight the current page:

`twig

<ul class="article-items">
    {# 使用 archiveList 获取文章数据，并指定为分页类型 #}
    {% archiveList archives with type="page" moduleId="1" limit="10" order="id desc" %}
        {% for item in archives %}
        <li class="article-item">
            <a href="{{ item.Link }}" class="article-link">
                {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">{% endif %}
                <div class="article-info">
                    <h3 class="article-title">{{ item.Title }}</h3>
                    <p class="article-description">{{ item.Description|truncatechars:150 }}</p>
                    <div class="article-meta">
                        <span class="category">分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                        <span class="date">发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span class="views">浏览量：{{ item.Views }}</span>
                    </div>
                </div>
            </a>
        </li>
        {% empty %}
        <li class="no-content">很抱歉，当前分类或搜索条件下暂无文章内容。</li>
        {% endfor %}
    {% endarchiveList %}
</ul>

{# 分页导航区域 #}
<nav class="pagination-nav">
    {% pagination pages with show="7" %} {# 设置最多显示 7 个页码按钮 #}
        <ul class="pagination-list">
            {# 显示总页数和总条目数，方便用户了解列表规模 #}
            <li class="page-info">共 {{ pages.TotalPages }} 页 / {{ pages.TotalItems }} 条</li>

            {# 首页链接，如果当前是首页则添加 active 类 #}
            <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 %}
            {# 中间页码链接，遍历 pages.Pages 数组 #}