How to list all documents under a specific tag in AnQi CMS template and support pagination?

In a content management system, effectively organizing and displaying articles is the key to improving user experience.When content is categorized through tags, we often need to list all articles under a specific tag on a single page, and to maintain the cleanliness and loading speed of the page, pagination functionality becomes indispensable.AnQi CMS provides powerful and flexible template tags, making this requirement easy to achieve.

This article will introduce how to combine in the AnQi CMS template,tagDataListTags andpaginationTags, elegantly list all documents under specific tags and support comprehensive pagination.

Get to know the core tools:tagDataListandpaginationTag

To implement the list and pagination under a specific tag, we mainly use two powerful template tags:tagDataListandpagination.

  1. tagDataListTags:This tag is specifically used to retrieve the document list associated with a specific tag.It is very flexible and can be used to filter and control the documents obtained through various parameters.type="page"It will tell the system to prepare pagination data for this list.

    Common parameters overview:

    • tagId: Specify the document under which label to retrieve. Usually on the label detail page, the system automatically identifies the current label's ID; on other pages, you can manually specify a label ID.
    • moduleIdIf your website has different content models such as articles and products, you can use this parameter to specify which model's documents to retrieve, for examplemoduleId="1"(Assuming the ID of the article model is 1).
    • limit: Set the number of documents displayed per page.
    • order: Define the sorting method of documents, such asorder="id desc"(Sorted by ID in descending order, i.e., the most recent published),order="views desc"(Sorted by views in descending order).
    • type="page"This is the key to implementing pagination! It will maketagDataListReturn a paginated dataset forpaginationlabel usage

    tagDataListThe document data obtained will be an array object, usually namedarchives(Or any name you like). Each item in the arrayitemincludes detailed information about the document, such asitem.Id/item.Title/item.Link/item.Description/item.Thumb(thumbnail),item.Views(Views) anditem.CreatedTime(Publish time) etc.

  2. paginationTags:This tag is responsible for generating pagination navigation links. It needs to receivetagDataListprepared pagination data. ThroughpaginationYou can easily generate "Home", "Previous page", "Next page", "End page" and a series of page number links.

    Common parameters overview:

    • show: Controls the maximum number of page link navigations displayed, for exampleshow="5"Displays the maximum of 5 page numbers around the current page.

    paginationA tag provides an object containing pagination information, usually namedpages. This object includes such aspages.TotalItems(Total number of documents),pages.TotalPages(Total number of pages),pages.CurrentPage(current page) and the objects pointing to each pagination link (pages.FirstPage/pages.PrevPage/pages.NextPage/pages.LastPageandpages.Pages)

Practice operation: Build a list of specific tag documents with pagination

Suppose we are building a tag detail page, hoping to display all articles under the tag and support pagination.

First step: Obtain the current tag information (optional but recommended)At the top of the page, we might want to display the name and description of the current tag. This can be achieved bytagDetailthe tag.

{# 假设这是 tag/list.html 或 tag/detail.html 模板 #}
{% tagDetail tagInfo with name="Title" %}
<h1>{{ tagInfo }}</h1>
{% tagDetail tagDescription with name="Description" %}
<p>{{ tagDescription }}</p>

Second step: usetagDataListGet paginated document dataNext, we will usetagDataListLabel to retrieve the document list under this label. The key is to settype="page"andlimitParameters, which will prepare for pagination

{# 使用 tagDataList 获取文档列表，并将 type 设置为 "page" 以支持分页 #}
{% tagDataList archives with type="page" limit="10" %}
    <ul class="document-list">
        {% for item in archives %}
        <li>
            <a href="{{ item.Link }}">
                <h3>{{ item.Title }}</h3>
                {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                {% endif %}
                <p>{{ item.Description }}</p>
                <div class="meta">
                    <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>浏览量: {{ item.Views }}</span>
                </div>
            </a>
        </li>
        {% empty %}
        <p>该标签下暂时没有找到任何文档。</p>
        {% endfor %}
    </ul>
{% endtagDataList %}

Here we iteratedarchivesOver each document in the variableitemAnd displayed the title, thumbnail, introduction, publish date, and view count information.{% empty %}Tags are used to display friendly prompts when the list is empty.

Third step: usepaginationBuild pagination navigationNow, the document list is ready, and we need to add pagination navigation.paginationThe tag needs to be placedtagDataListAfter the tag, so that it can access heretagDataListGeneratedpagesObject.

{# 分页导航区域，假设 pages 变量由上面的 tagDataList 标签自动填充 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %}
    <ul class="page-links">
        {# 首页链接 #}
        <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 pageItem in pages.Pages %}
        <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
            <a href="{{ pageItem.Link }}">{{ pageItem.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>
    <div class="page-info">
        共 {{ pages.TotalItems }} 篇文章，{{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。
    </div>
    {% endpagination %}
</div>

We use here,pagesThe various properties of the object are used to build a complete pagination navigation.pageItem.IsCurrentCan be used to highlight the current page number,pages.PrevPageandpages.NextPageThe condition ensures that the corresponding links are displayed only when there is a previous page/next page.

Complete example code

Integrate the above code snippet together, and a page with a list of documents with specific tags and pagination functionality is completed:

”`twig {% extends ‘base.html’ %} {# Inherit the base template to ensure the existence of common elements such as header, footer, etc. #}

{% block content %} {# Define content area #}

{# Part 1: Display the name and description of the current tag #}

{% tagDetail tagInfo with name="Title" %}