How to use the `pagination` tag to build standard pagination navigation in a template?

When the content of the website becomes increasingly rich, a clear and efficient pagination navigation system is crucial for improving user experience. The template system of AnQiCMS (AnQiCMS) provides a powerfulpaginationLabels, allowing us to easily build standard, beautiful pagination navigation. Next, we will delve into how to use this tag in templates.

UnderstandingpaginationThe role of the label

paginationThe label is a component specially designed for pagination functionality in the Anqi CMS template system.Its main task is to generate a series of pagination links based on the data of the content list, making it convenient for users to navigate between multiple pages.archiveList/tagDataList等）配合使用。When your content list label is set to pagination mode (i.e."),type="page"){pagination标签就能获取到相应的分页数据，并将其渲染成导航链接。The label can fetch the corresponding pagination data and render it into navigation links.

paginationLabels provide two main parameters to allow us to flexibly control the display of pagination navigation:

• showThis parameter is used to control the number of visible page numbers in pagination navigation. For example, setshow="5"This means that up to 5 page number links will be displayed before and after the current page. When the total number of pages is large, the excess part will be omitted to keep the pagination navigation bar concise and prevent it from being too long.
• prefixThis is a more advanced parameter used to redefine the URL pattern of pagination links.In most cases, the security CMS will automatically handle the generation of URLs, and you usually do not need to set it manually.If your website has special requirements, such as adding custom parameters before page link, you can use it.prefixmust contain{page}placeholder, such asprefix="?page={page}".

paginationthe data structure returned by the tag

paginationThe label will return an object containing rich pagination information. In the template, we usually assign a variable name to this object (such aspages），then use this variable to access its properties. Thispagesobject will contain the following key information:

• TotalItems: indicates the total number of records of all content.
• TotalPages: indicates how many pages the content is divided into in total.
• CurrentPage：表示用户当前正在浏览的是第几页。
• FirstPage：一个对象，包含首页的名称（Name，通常是“首页”或“1”）和链接（Link）。它还有一个IsCurrentProperty, used to determine if it is the current page.
• LastPage: An object, containing the name of the last page (Name）and link（Link) and also hasIsCurrentproperties.
• PrevPageAn object that includes the name and link of the previous page. This object may not exist if it is the first page.
• NextPageAn object that contains the name and link of the next page. If it is the last page, this object may not exist.
• PagesThis is an array that includes detailed information about the middle page number, which needs to be accessed throughfora loop to iterate and display.
  • PagesEach element in the array (for example, it can be named in a loop)itemcontains the following fields:
    • Name：Page number display name (usually the page number).
    • Link：The URL link corresponding to this page number.
    • IsCurrentAn indicator of whether the current page number in the loop is the page the user is currently visiting. This is very useful for adding special styles (such as highlighting) to the current page.

Actual operation: Build standard pagination navigation

Now, let's build a standard pagination navigation through a practical example. Suppose we are adding pagination functionality to an article list page.

First, make sure that your content list tag (here taken as an example) is set to pagination mode and specify the number of items per page.archiveListFor example) is set to pagination mode and specify the number of items per page.

`twig

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <!-- 这里是每篇文章的显示内容，例如标题、简介等 -->
    <article class="article-item">
        <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
        <p>{{ item.Description }}</p>
        <div class="article-meta">
            <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            <span>阅读量：{{ item.Views }}</span>
        </div>
    </article>
    {% empty %}
    <p class="no-content">暂无文章可显示。</p>
    {% endfor %}
{% endarchiveList %}

{# 分页导航区域开始