How to implement document sorting and pagination display on the Tag document list page?

AnQi CMS is an efficient and flexible content management system, and its Tag feature is an important way to organize and discover content.When a user visits a specific Tag page, they often expect to see all documents related to that Tag, and these documents should be presented in an orderly and easy-to-browse manner.This involves how to implement document sorting and pagination display on the Tag document list page.

In AnQi CMS, realizing this function mainly relies on its powerful template tag system, especiallytagDataListTags andpaginationTags. By flexibly using these tags and their parameters, we can easily build a user-friendly Tag document list.

Understanding the structure of the Tag document list page.

The page typically used in AnQi CMS template design to display the document list under Tag/template/{当前模板目录}/tag/list.html. This is the main operation area where we display all related documents under a specific tag.The system will automatically identify the Tag information being accessed on this page, and we just need to call the corresponding tag to get and render the data.

Core tags:tagDataListand its sorting function

tagDataListThe tag is the core tool of AnQi CMS used to retrieve the document list under a specified tag.It can retrieve all associated documents based on the Tag ID provided.In order to achieve sorting and pagination, we need to pay attention totagDataListthe several key parameters:

1. tagIdThis is the basic parameter, used to specify which Tag's document list to retrieve. Intag/list.htmlthe page, it is usually not necessary to set explicitly.tagIdBecause the system will automatically try to read the Tag ID of the current Tag page.
2. type="page": This parameter is crucial, it tells the system that we need to generate pagination data for the document list. Set to"page"after,tagDataListIt will not only return the document list of the current page but also implicitly provide pagination informationpagesvariables, forpaginationlabel usage
3. order: Used to control the sorting method of the document. Anqi CMS provides multiple sorting options, you can choose according to your actual needs:
   • "id desc": Sort documents by document ID in descending order (usually meaning the most recently published documents are at the top).
   • "views desc": Sort documents by document views in descending order (popular documents at the top).
   • "sort desc": Sort by the custom sorting value in descending order. For example, if we want the latest published documents to be displayed first, we can setorderthe parameter to"id desc"If you want the most popular documents at the top, set it to"views desc".
4. limit: Defines how many documents are displayed per page. This is a very practical parameter, such aslimit="10"means 10 articles per page.

By combining these parameters,tagDataListA document list that can output in accordance with our sorting requirements and is ready for pagination.

{% tagDataList archives with type="page" limit="10" order="views desc" %}
    {% for item in archives %}
    <div class="document-item">
        <a href="{{item.Link}}">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
            <span class="info">
                发布时间: {{stampToDate(item.CreatedTime, "2006-01-02")}} |
                浏览量: {{item.Views}}
            </span>
        </a>
    </div>
    {% empty %}
    <p>该标签下暂无任何文档。</p>
    {% endfor %}
{% endtagDataList %}

In the above code snippet, we specified that 10 documents should be displayed per page and sorted by views in descending order.{% empty %}The tag elegantly handles the situation where a prompt message is displayed when there is no document.

Pagination display:paginationThe use of tags

WhentagDataListoftypethe parameter to"page"After that, the system will automatically generate a name forpagesThe variable, which contains all the data related to pagination, such as total number of pages, current page, first page, last page, and previous/next page links, at this point, we can usepaginationTo render beautiful pagination navigation.

paginationThe most commonly used parameter is for the tagshowIt determines how many page link numbers are displayed in the pagination navigation. For example,show="5"means that up to 5 page numbers are displayed around the current page number.

<div class="pagination-container">
    {% pagination pages with show="5" %}
        <a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}
        <a class="pagination-link" href="{{pages.PrevPage.Link}}">上一页</a>
        {% endif %}
        {% for item in pages.Pages %}
        <a class="pagination-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}
        <a class="pagination-link" href="{{pages.NextPage.Link}}">下一页</a>
        {% endif %}
        <a class="pagination-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
    {% endpagination %}
</div>

This code will be based onpagesVariable data, automatically generates a pagination navigation that includes home page, previous page, specific page number, next page, and end page links.item.IsCurrentIt can help us add styles to the current page number and enhance user recognition.

Comprehensive example: Build a complete Tag document list page

totagDataListandpaginationCombined with tags, we can betag/list.htmlImplement a feature-complete Tag document list page template:

`twig {# tag/list.html #} <!DOCTYPE html>

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true