How to implement pagination display and style control for document list using the `pagination` tag?

As a website operator who deeply understands the operation of AnQiCMS, I know the exquisite presentation of content lies in how to serve users efficiently and elegantly.For a document list page with a large amount of content, a reasonable pagination mechanism can not only improve user experience but also optimize website performance.In AnQiCMS,paginationThe tag is the core tool to achieve this goal, it allows us to flexibly control the pagination display and style of the document list.

Understand the pagination mechanism in AnQiCMS

AnQiCMS decouples the pagination logic of the content list from the content display itself, which means you first need to usearchiveListtags totype="page"the pattern to obtain the paged document data. OncearchiveListGenerated a dataset with pagination information (usually we would name itarchives, accompanied by apagesvariable to store pagination metadata),paginationThe label can take the stage, responsible for parsing these pagination metadata and rendering them as visible navigation elements.This separation design concept gives template developers a great degree of freedom, allowing for in-depth customization of the visual presentation of pagination without affecting the core data logic.

paginationBasic usage of tags

paginationThe use of tags is very intuitive, it always coordinates with a variable that stores pagination information and appears in the structure of{% pagination pages with show="5" %}...{% endpagination %}. Here,pagesis provided byarchiveListThe tag is intype="page"mode automatically provided pagination objects.showThe parameter is the key to controlling the number of pages displayed on the page, for example,show="5"It means displaying up to 5 numeric page link numbers before and after the current page number to maintain the simplicity of pagination navigation.

In addition to the basicshowOutside the parameters,paginationthe tag also provides aprefixParameter, this is usually a premium feature. It allows you to redefine the URL pattern of pagination links, for exampleprefix="?page={page}"In most standard application scenarios, AnQiCMS automatically handles the construction of URLs, thereforeprefixThe parameters usually do not need to be manually set.

paginationThe core fields provided by the tag

paginationThe tag encapsulates a comprehensive pagination data object, through these fields, we can accurately construct pagination navigation. These fields include:

• TotalItemsThis indicates the total number of items in the document list, allowing users to understand the total amount of content.
• TotalPagesThis shows the total number of pages in the document list, informing users how the content is distributed across multiple pages.
• CurrentPage: Marks the current page being viewed by the user, which is crucial for the user to locate their own position.
• FirstPage: An object containing a link to the first page and name, convenient for users to quickly return to the starting page.
• LastPage: An object containing a link to the last page and a name, for easy user navigation to the end of the content.
• PrevPage: An object containing a link to the previous page and its name, enabling sequential browsing.
• NextPage: An object containing a link to the next page and its name, used to continue browsing the next page content.
• Pages: This is an array object, containing the middle page number links, which is the core data for building the page number list.

Especially,PagesEach element in the array (which we callpageItem) also has its own fields, includingName(Page display name, such as "1", "2"),Link(The URL pointing to this page) as well asIsCurrent(A boolean value indicating whether the page number is the current active page).

How to build a flexible pagination style

BypaginationFields provided by the label, we can build highly customized pagination navigation. Below is a typical AnQiCMS pagination code example, showing how to combine these fields to implement a fully functional and style-controlled pagination:

First, make sure you have usedarchiveListtags totype="page"pattern to retrieve the document list data:

{# page 分页列表展示 #}
<div>
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>{{item.Views}} 阅读</span>
            </div>
        </a>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </li>
    {% empty %}
    <li>
        该列表没有任何内容
    </li>
    {% endfor %}
{% endarchiveList %}

    {# 分页代码 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
        <ul class="pagination">
            {# 显示总数、总页码、当前页等信息 #}
            <li class="info">总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>

            {# 首页链接，根据IsCurrent状态添加active样式 #}
            <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 %}

            {# 中间数字页码列表，遍历Pages数组 #}
            {% 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 %}

            {# 末页链接，根据IsCurrent状态添加active样式 #}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
            </li>
        </ul>
        {% endpagination %}
    </div>
</div>

In this example, we firstdivandulTags provide structure to the pagination area, making it easy to style with CSS later. Each pagination link is wrapped inlitags and addedpage-itemclasses. We cleverly utilizeIsCurrentThe attribute dynamically added to the current page numberactiveclass, which allows us to highlight the current page through CSS rules (such as.pagination .active a { background-color: #007bff; color: white; }) to enhance visual feedback.

In addition, for the 'Previous page' and 'Next page' links, we use{% if pages.PrevPage %}and{% if pages.NextPage %}Perform conditional judgment to ensure that these navigation elements are only rendered when logically present, avoiding invalid links and further optimizing the user experience.This fine control allows you to freely adjust the layout, color, font, and all visual elements according to the design style of the website.

Conclusion

paginationTags serve as the core of AnQiCMS content list pagination, with a design philosophy that provides strong data support and high template rendering freedom.By flexibly using its parameters and built-in fields, and combining it with CSS for style control, you will be able to provide website visitors with an efficient and beautiful browsing experience, making the presentation of the content list even better.

Frequently Asked Questions

Q1: Why isn't pagination displaying on my page?A: First, please check yourarchiveListtags have been set.type="page"becausepaginationLabels are onlyarchiveListIt will work normally when fetching data in pagination mode. Secondly, make sure that your content list indeed contains more than one page of data. If there is not enough content to paginate, the pagination navigation will not be displayed naturally.Finally, please check the template inpaginationIs the syntax of the label correct, especially the variable namepageswhether it is witharchiveListThe variable of the returned pagination data is consistent

Q2: How to change the number of displayed page numbers in pagination?A: You can usepaginationlabel'sshowparameters to control the number of numeric page numbers displayed. For example,{% pagination pages with show="7" %}The links to more page numbers will be displayed before and after the current page number, with a total of up to 7 numeric page numbers.You can adjust this parameter based on the width of the page and design requirements to achieve **visual effects.

Q3: Can pagination be used in conjunction with search results or filtering conditions?A: Of course. AnQiCMS'paginationwith the tag andarchiveListand tightly integrated with tags,archiveListIt supports itselfq(Search keywords) and custom filtering parameters. This means that when a user is paging through search results pages or list pages with applied filtering conditions,paginationThe tag will automatically generate a new pagination link containing these search and filter conditions, ensuring that the search or filter criteria are retained when switching between page numbers, thus providing a seamless user experience.