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

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

UnderstandingpaginationThe role of the tag

paginationThe tag is a component designed specifically for pagination functions 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.This tag usually needs to be used with content list tags that support pagination functionality, such asarchiveList/tagDataListUse it together. When your content list tag is set to pagination mode (i.e.type="page"),paginationtag can get the corresponding pagination data and render it into navigation links.

paginationThe tag provides two main parameters to flexibly control the display of pagination navigation:

• showThis parameter is used to control the number of page numbers visible in the pagination navigation. For example, setshow="5"This means that up to 5 page number links will be displayed before and after the current page number. When the total number of page numbers is large, the excess part will be omitted to keep the pagination navigation bar concise and avoid being too long.
• prefixThis is a more advanced parameter, used to redefine the URL pattern of pagination links.In most cases, Anqi 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 to the page number links, you can use it.However, please note,prefixmust contain{page}placeholder, for exampleprefix="?page={page}".

paginationlabel returns the data structure

paginationThe tag returns an object containing rich pagination information. In the template, we usually assign a variable name to this object (such aspages), then access its properties through this variable. ThispagesThe object will contain the following key information:

• TotalItems: indicates the total number of content records.
• TotalPages: indicates how many pages the content is divided into.
• CurrentPage: Indicates the page number the user is currently browsing.
• FirstPage: An object containing the name of the home page (Name, usually "home" or "1") and the link (Link)). It also has anotherIsCurrentProperty used to determine if it is the current page.
• LastPage: An object containing the name of the last page (Name) and the links(Link) which also hasIsCurrentProperty.
• PrevPageA object containing the name and link of the previous page. This object may not exist if the current page is the first page.
• NextPageA object that contains the name and link of the next page. This object may not exist if the current page is the last page.
• PagesThis is an array that contains detailed information about the middle page number, which needs to be processed throughforLoop to traverse and display.
  • PagesEach element in the array (for example, it can be named in a loop) contains the following fields:itemThe following fields are included:
    • Name: The display name of the page number (usually just the page number).
    • Link: The URL link corresponding to the page number.
    • IsCurrentA boolean value indicating whether the current page number being cycled through 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 your content list tag (here usingarchiveListas an 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 %}

{# 分页导航区域开始