How to correctly configure the `pagination` tag to generate a functional pagination navigation on the list page?

In website content management, configuring a feature-rich pagination navigation for the list page is a key factor in improving user experience and optimizing website structure. AnqiCMS (AnqiCMS) provides a simple yet powerfulpaginationLabels, allowing developers to easily implement this requirement.

To makepaginationLabels correctly generate pagination navigation on the list page, first you need to understand its working mechanism as well as with content list labels (such asarchiveListCollaboration between them.paginationThe tag does not exist independently; it needs to obtain pagination data from the content list tag. This means that in your template file, you must use it first.archiveListSuch content list tags to query data, and specify the type as pagination mode, thenpaginationTags can be based on this data to build pagination navigation.

Configure the content list label to support pagination

You need to use pagination navigation on any list page that requires it, such as article list pages, product list pages, or category list pages,archiveListLabel to retrieve article or product data. The key is that you need totypethe parameter to"page"and throughlimitParameters define the number of items displayed per page.

For example, if you want to display 10 articles per page on a page, you can configure it like thisarchiveListTags:

{% archiveList archives with type="page" limit="10" %}
    {# 循环输出每篇文章的简要信息 #}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
        </a>
    </li>
    {% endfor %}
{% endarchiveList %}

Here, archivesIs a variable name that will contain the article data for the current page.type="page"Tell AnQi CMS that this is a paginated list, andlimit="10"then set the number of items per page.

Deep understandingpaginationLabel configuration

InarchiveListAfter the label, you can introducepaginationuse,a,tag,to,create,pagination,navigationpaginationThe usage method of the label is as follows:

{% pagination pages with show="5" %}
    {# 在这里构建您的分页导航 HTML 结构 #}
{% endpagination %}

here,pagesis a variable that contains all the pagination information, it is generated byarchiveList type="page"automatically.show="5"The parameter specifies the maximum number of page buttons to display in the pagination navigation. For example, if there are a total of 10 pages,show="5"It may display the current page number and 5 pages before and after it, instead of all 10 pages.

pagesThe variable contains rich pagination status and link information, you can use it to build a complete pagination navigation:

• pages.TotalItems: Total number of items.
• pages.TotalPages: Total number of pages.
• pages.CurrentPage: Current page number.
• pages.FirstPage: Home object, includingName(such as 'Home') andLink.
• pages.LastPage: The end page object includesName(For example, 'end page') andLink.
• pages.PrevPage: The previous page object includesName(For example, 'previous page') andLink. If it is the first page, this object is empty.
• pages.NextPage: The next page object includesName(For example, "next page") andLink. If it is the last page, this object is empty.
• pages.Pages: An array that includes detailed information of middle page numbers, each element containsName(page number),LinkandIsCurrent(Is this the current page?).

Use this information to design a flexible pagination navigation layout.A common feature-rich pagination navigation will include elements such as 'Home', 'Previous page', 'Middle page numbers', 'Next page', and 'End page'.

Here is a recommended, complete and easy-to-understand pagination navigation implementation example:

<div class="pagination-nav">
    {% pagination pages with show="5" %}
    <ul>
        {# 显示总数信息，方便用户了解列表规模 #}
        <li>共 <b>{{pages.TotalItems}}</b> 条记录，<b>{{pages.TotalPages}}</b> 页，当前第 <b>{{pages.CurrentPage}}</b> 页</li>

        {# 首页链接，并根据是否当前页添加样式 #}
        <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>

By this structure, you can easily add styles to pagination navigation using CSS, such as highlighting the current page number or hiding non-clickable 'Previous'/'Next' buttons.

Combine search and filter functions

It is worth mentioning that the Anqi CMSpaginationTags can also be seamlessly integrated with search and filter functions. When yourarchiveListThe page containing your tags includesqParameters (search keywords) or custom filter parameters when,paginationThe tag-generated link will automatically include these parameters to ensure that the search and filtering conditions are still valid when the user navigates to the next page.This greatly simplifies the work of developing complex list pages, no need to manually handle URL parameters.

In short, proper configurationpaginationTags are the foundation for building efficient, user-friendly CMS website list pages. By understandingarchiveListwithpaginationthe relationships and utilizingpagesInformation provided by the variable is rich, you can easily implement powerful pagination navigation.

Frequently Asked Questions (FAQ)

1. Why did I configurepaginationBut there is no pagination navigation displayed on the page?

The most common reason is that the tag (such asarchiveListortagDataList) is not set correctlytype="page"parameter is not set or not configuredlimitParameter.paginationThe label needs this information to know how to paginate and how many items to display per page. Please ensure that your content list label is similar to{% archiveList archives with type="page" limit="10" %}.

How to customize the style and layout of pagination navigation?

paginationTags provide the dynamic data and links needed for pagination, and the specific HTML structure and CSS style are completely under your control. You can{% pagination pages with show="5" %}...{% endpagination %}Between the code blocks, use HTML tags (such asul,li,a) combined with CSS class names to design the appearance you want. For example, you can useclass="active"Mark the current page number and then highlight it through CSS rules.

3. Does the search and filter function on my list page lose these conditions when paginating?

I won't. Anqi CMSpaginationThe tag is designed very intelligently, it will automatically inherit the search keywords from the current page URL (qParameters and any custom filter parameters. This means that when users navigate through pages on search or filter result pages, the generated pagination links will automatically retain these query parameters, ensuring a consistent user experience.You do not need to make any additional configuration to handle this situation.