The tag (Tag) feature of AnQi CMS, as an efficient and flexible content management system, is an important way to organize and discover content.When the 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 sorting and pagination display of documents in the Tag document list page.

In the Anqi CMS, the implementation of this function mainly depends on its powerful template tag system, especiallytagDataListTags andpaginationLabel. By flexibly using these two labels and their parameters, we can easily build a user-friendly Tag document list.

Understand the structure of the Tag document list page.

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

Core tags:tagDataListwith its sorting function

tagDataListThe label is a core tool used by AnQi CMS to retrieve the document list under a specified Tag.It can retrieve all associated documents based on the Tag ID we provide.tagDataListand several key parameters:

  1. tagId: This is the most basic parameter, used to specify which Tag's document list to retrieve.tag/list.htmlIn the page, it is usually not necessary to set explicitly.tagIdBecause the system will automatically attempt to read the current Tag page's Tag ID.
  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 list of documents on the current page, but also implicitly provide a variable containing pagination information.pagesforpaginationUse the label.
  3. order: Used to control the sorting method of the document. Safe CMS provides a variety of sorting options, you can choose according to your actual needs:
    • "id desc": 按照文档ID降序排列（通常意味着最新发布的文档在前）。
    • "views desc": 按照文档浏览量降序排列（热门文档在前）。
    • "sort desc": English - according to the descending order of the custom sorting value of the background. For example, if we want the latest documents to be displayed first, we canorderparameter settings"id desc"If you want the most popular documents to be displayed first, set it to"views desc".
  4. limit: Defines how many documents are displayed per page. This is a very practical parameter, such aslimit="10"This means 10 articles are displayed per page.

By combining these parameters,tagDataListThe document list can be 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 specify that each page displays 10 documents and sorts them by views in descending order.{% empty %}Tags elegantly handle the situation where no document is displayed with a prompt message.

Paging display:paginationThe Use of Tags

WhentagDataListoftypeparameter settings"page"After that, the system will automatically generate a namedpagesThe variable contains all data related to pagination, such as total number of pages, current page, first page, last page, and links to previous and next pages. At this point, we can usepaginationLabels to render beautiful pagination navigation.

paginationThe most commonly used parameter of the label isshowwhich determines how many page number links are displayed in the pagination navigation. For example,show="5"Means to display up to 5 page numbers near the current page.

<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 onpagesThe data in the variable, automatically generates a pagination navigation that includes links to the home page, previous page, specific page number, next page, and end page.item.IsCurrentIt can help us add styles to the current page number, enhancing user recognition.

Comprehensive example: Build a complete Tag document list page.

totagDataListandpaginationCombined with tags, we can be able to intag/list.htmlImplement a well-equipped Tag document list page in the template: English

English

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