How to flexibly control the display quantity and style of pagination page numbers with the `pagination` tag of AnQiCMS?

When managing a content-rich website, an efficient page navigation system is crucial for enhancing user experience and search engine optimization (SEO). AnQi CMS understands this and has built-in thepaginationTags provide fine-grained control, making the page number display on the website flexible and beautiful. This article will introduce you to how to use it in depthpaginationLabel, flexibly control the display quantity and style of pagination page numbers.

UnderstandpaginationThe core role of tags

In AnQi CMS,paginationThe label does not exist independently, it is usually used with content list labels such asarchiveList/tagDataList/commentListetc.) used together. When these list labelstypethe parameter to"page"They will return a paginated dataset instead,paginationThe task of the label is to generate the corresponding page navigation based on this dataset.

In simple terms,paginationThe tag is used to present the pagination logic calculated on the backend in a customizable HTML structure on the front-end, allowing us to easily implement 'Previous page', 'Next page', 'Home', 'End', and a series of page number navigation.

How to usepaginationTag

paginationThe basic usage of tags is very intuitive, it needs to be wrapped around{% pagination ... %}and{% endpagination %}Between. When using it, you need to pass the pagination data obtained through the list tag to it, usually we name this variable.pages.

For example, we might use it like this on a document list pagearchiveListandpagination:

{# 首先，通过 archiveList 获取分页数据 #}
{% archiveList archives with type="page" limit="10" %}
    {# 循环显示文档列表内容 #}
    {% for item in archives %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% empty %}
        <li>暂无文档</li>
    {% endfor %}
{% endarchiveList %}

{# 接下来，使用 pagination 标签生成页码导航 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 这里是分页页码的具体显示内容，稍后详细说明 #}
    {% endpagination %}
</div>

Here, pagesThis variable contains all information related to pagination, such as total number of items, total number of pages, current page number, home link, previous page link, next page link, end page link, and most importantly—the array of middle page numbers.

Flexibly control the number of pages displayed:showParameter

paginationOne of the highlights of the tag is that it allows us to go throughshowParameters, flexibly control the display quantity of the middle page number area. This is very important to maintain the simplicity and beauty of page navigation.

showThe parameter accepts an integer value that determines how many page number links are displayed around the current page. For example:

• show="3"This makes page navigation more compact, usually showing 1-2 page numbers before and after the current page, and the ellipsis appears earlier.
• show="5"This is a commonly used setting that displays 2-3 page numbers before and after the current page, providing a good context without being too long.
• show="7"If your page space is ample, or you want users to see more page number options, you can increase this value appropriately.

Reasonably setshowParameters that can keep pagination in good visual balance across different page counts and device sizes. For example, when the total number of pages is not many,showThe parameters will automatically adjust to display all page numbers without ellipses. When the total number of pages is very large, it can also intelligently hide some page numbers to avoid the page number bar being too long.

Custom pagination style and layout

paginationThe tag itself does not directly output styled HTML, it provides the data needed to build pagination.This means we can fully master the HTML structure and CSS style of pagination, achieving a highly customized appearance.

pagesMultiple properties are provided in the variable, for us to build styles:

• pages.TotalItemsTotal number of content items.
• pages.TotalPages: Total number of pages.
• pages.CurrentPage: Current page number.
• pages.FirstPage/pages.LastPage/pages.PrevPage/pages.NextPageThese are four special objects, each containingName(such as "Home") andLink(link address), as well asIsCurrent(whether the current page, usually the home page and the end page are not the current page).
• pages.PagesThis is an array that contains page number objects in the middle part. Each object also hasName(page number),Link(link address) andIsCurrent(whether it is the current page).

By using these properties, we can easily construct various styles of pagination:

<div class="pagination-wrapper">
    <ul class="pagination-list">
        {# 显示总页数和当前页信息，可选 #}
        <li class="page-info">
            总{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页
        </li>

        {# 首页链接 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}is-current{% 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 %}is-current{% 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 %}is-current{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
</div>

In the above code, we added to each page item:page-itemclass, and make use of{% if item.IsCurrent %}or{% if pages.FirstPage.IsCurrent %}Determine if the current page is active, and addis-currentthe class. This way, we can control the style ofis-currentthe class to highlight the current page number, for example:

.pagination-list {
    display: flex;
    list-style: none;
    padding: 0;
    justify-content: center;
    align-items: center;
}

.page-item {
    margin: 0 5px;
}

.page-item a {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease;
}

.page-item a:hover {
    background-color: #f5f5f5;
}

.page-item.is-current a {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    pointer-events: none; /* 当前页不可点击 */
}

.page-info {
    margin-right: 15px;
    color: #666;
}

In this way, the layout, color, font, border, and all other visual elements of the page number can be adjusted according to the overall design style of the website, without being limited by the fixed styles provided by the CMS.

Complete example: Applying pagination on the document list page

Let's see a more complete example of how to implement pagination on the article list page:

`twig {# Assume this is the article list page template (e.g., archive/list.html) #} u003c!

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</