How to configure pagination tags to provide user-friendly content list navigation?

In AnQi CMS, as the content on our website becomes richer and richer, how to efficiently organize and present this information so that visitors can easily find what they need among a large amount of content has become a key issue.Excellent content list navigation, especially the pagination feature, not only improves user experience, but is also an indispensable part of search engine optimization (SEO).The Anqi CMS provides a powerful and flexible pagination tag that allows you to easily configure user-friendly content list navigation.

The foundation of content list: configure content acquisition tags

In Anqi CMS, all content lists, whether articles, products, or other custom models, cannot do without similararchiveListSuch list tags. These tags are responsible for fetching the specified content from the database. When we need to enable pagination for these lists,archiveListin the labeltypeParameters are particularly important, we need to set them up as'page'.

For example, if you want to display the 10 most recently published articles and provide pagination for them, yourarchiveListThe label may be configured like this:

{% archiveList archives with type="page" limit="10" %}
    {# 这里是您的文章列表项的循环代码 #}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <p>{{item.Description}}</p>
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            </a>
        </li>
    {% empty %}
        <li>该列表暂时没有任何内容。</li>
    {% endfor %}
{% endarchiveList %}

Here, archivesThe variable will contain the document list of the current page, and all the information required for pagination navigation will be automatically encapsulated with thearchiveListlabel associated withpagesIn the variable, waiting for our next call.

The core of pagination navigation:paginationThe clever application of tags

After getting the content list, the next step is to usepaginationPage labels to build visible navigation elements.paginationLabels do not exist independently, they are related to the aforementioned.archiveListLabels work together through.archiveListInternally generated.pagesVariables to obtain all pagination information.

The basic way to use it is like this:

{% pagination pages with show="5" %}
    {# 这里将是您分页导航的具体HTML结构 #}
{% endpagination %}

Here, pageswhich we get fromarchiveListOr other list tags (such astagDataList/commentListvariables containing pagination information obtained from there. Andshow="5"This parameter is very useful, it determines the maximum number of page number links displayed in pagination navigation. For example,show="5"It means that it will display the current page number and the two page numbers before and after it, totaling 5 page number links, which allows the pagination bar to be neither too long nor too short, while still providing enough navigation options.

pagesThe variable contains all the information you need to build pagination navigation, such as total number of items (TotalItems), Total number of pages (TotalPages)、current page (CurrentPage) and the complete object pointing to the home page (FirstPage) End page (LastPage) Previous page (PrevPage) Next page (NextPage) The most important thing is that it also has aPagesThe array contains detailed information about all middle page numbers.

We can usepagesEach field in the variable, flexibly constructing a complete and interactive pagination navigation:

• pages.TotalItems: Display the total number of contents.
• pages.TotalPages: Display the total number of pages.
• pages.CurrentPage: Display the current page number.
• pages.FirstPage.Nameandpages.FirstPage.Link: Used to build the 'Home' link.FirstPage.IsCurrentCan determine if it is the home page.
• pages.PrevPage.Nameandpages.PrevPage.Link: Used to build the 'Previous page' link. Note that the check should be performed.pages.PrevPageDoes it exist, if it is the first page, there will be no previous page.
• pages.Pages: This is an array that includes all visible page numbers (byshowParameter control). We can traverse this array to generate the middle page link. Eachitem(Page item) existsitem.Name(page number),item.Link(Page link) anditem.IsCurrent(Determine if it is the current page, used to add style).
• pages.NextPage.Nameandpages.NextPage.LinkUsed to build the 'next page' link. It also needs to be checked.pages.NextPagewhether it exists.
• pages.LastPage.Nameandpages.LastPage.LinkUsed to build the 'last page' link.LastPage.IsCurrentCan determine if it is the last page.

Here is a commonly used pagination navigation code example that demonstrates how to use this information to build a complete pagination bar:

<div class="pagination-container">
    {% pagination pages with show="5" %}
        <p>
            共 <span>{{pages.TotalItems}}</span> 条内容，
            总 <span>{{pages.TotalPages}}</span> 页，
            当前第 <span>{{pages.CurrentPage}}</span> 页
        </p>
        <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>
    {% endpagination %}
</div>

A complete example combining the content list with pagination navigation

toarchiveListwithpaginationCombine the tags, and you can implement the complete function of obtaining pagination navigation from content in a template file.

`twig {# Assuming this is your article list page template (e.g., template/article/list.html) #}

<h1>最新文章</h1>

<ul class="article-items">
{% archiveList archives with type="page" limit="10" %}
    {% 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">
                    <h2 class="article-title">{{item.Title}}</h2>
                    <p class="article-description">{{item.Description}}</p>
                    <div class="article-meta">
                        <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                        <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span>阅读量：{{item.Views}}</span>
                    </div>
                </div>
            </a>
        </li>
    {% empty %}
        <li class="no-content">当前分类下暂时没有文章。</li>
    {% endfor %}
{% endarchiveList %}
</ul>

{# 分页导航区域 #}
<div class="pagination-