How to retrieve and display a list of documents under a specified Tag, and support pagination?

In website content management, categorizing and displaying documents according to their tags (Tags) is an important strategy to enhance user experience and content discoverability.AnQiCMS provides a set of intuitive and powerful template tags that help us easily achieve this goal, while also supporting flexible pagination functionality. It can maintain page cleanliness and loading speed even when faced with massive amounts of content.

To retrieve and display the document list under the specified tag and implement pagination, we need to use two core tags of the AnQiCMS template engine:tagDataListandpaginationThese two tags work together to help us build a complete tag document list page.

Core Tag: Tag document list tagtagDataList

tagDataListTags are specifically used to retrieve a list of documents associated with a specific tag from the database. Its usage is very flexible and can be customized according to our needs.

In use, we usually define it in this form:{% tagDataList archives with tagId="1" type="page" limit="10" %}. Here,archivesIt is the variable name we define for the document list, you can name it according to your habits.

The following is a description of some key parameters:

• tagIdThis is the most core parameter, used to specify which label under the document we want to retrieve. You can directly fill in the label ID (for exampletagId="1")，can also let the system automatically identify the tag ID of the current page. If the current page itself is a detail page of a tag (such astag/list.htmlortag/index.html)tagDataListThe tag usually automatically gets the ID of the tag, so we do not need to specify it manually.
• type="page"This parameter is crucial, it tells the system that we need a document list that supports pagination. Only when it is settype="page",tagDataListwill the list data and pagination information be returned together, so that it can be combined laterpaginationlabel usage
• limit: Used to control how many documents are displayed per page. For example,limit="10"means 10 documents are displayed per page.
• moduleId: If you need to filter tag documents under a specific content model (such as "article" or "product"), you can specify the model ID through this parameter. For example, moduleId="1"It usually represents the article model.
• order: Defines the sorting method of the document, common ones includeid desc(Sorted by ID in descending order, i.e., the latest release),views desc(Sorted by view count in descending order) etc.

tagDataListAfter the tag is executed, it will fill the document data that meets the conditions into the variables we define (for examplearchivesIn this case, this variable is an array object, and we can traverse and display the content of each document byforLoop to traverse and display the content of each document.

Combined with pagination tagspagination

When we usetagDataListAnd willtypethe parameter topageAfter, the system will generate the corresponding pagination data. This pagination data can be displayed as a user-visible pagination navigation throughpaginationtags.

paginationThe usage of tags is as follows:{% pagination pages with show="5" %}. Among them,pagesis the variable name automatically generated by the system that contains pagination information.

• showThis parameter controls how many page numbers are displayed at one time in the pagination navigation. For example,show="5"It will display 5 page number links before and after the current page number.

paginationThe tag inside also needs to pass throughforLoop to traverse each page link and display navigation elements such as 'Home', 'Previous Page', 'Next Page', and 'End Page'.It will intelligently generate a complete page navigation based on the current page number and total number of pages.

Practice exercise: Retrieve and display the list of specified tag documents (with pagination)

Here is a complete template code example showing how to retrieve a document list under a specific tag and implement pagination in AnQiCMS.Assuming this is a label detail page template.

{# 假设我们正在一个标签详情页面，tagDataList 会自动获取当前标签ID #}

<div class="tag-documents">
    {# 获取当前标签的详细信息，例如标签名称和描述 #}
    {% tagDetail currentTag with name="Title" %}
    {% tagDetail tagDescription with name="Description" %}
    <h1>标签：{{ currentTag }}</h1>
    {% if tagDescription %}
        <p class="tag-description">{{ tagDescription }}</p>
    {% endif %}

    <ul class="document-list">
        {# 使用 tagDataList 标签获取当前标签下的文档列表，并开启分页功能 #}
        {% tagDataList archives with type="page" limit="10" order="id desc" %}
            {% for item in archives %}
            <li class="document-item">
                <a href="{{ item.Link }}" class="document-title">
                    <h3>{{ item.Title }}</h3>
                </a>
                {% if item.Thumb %}
                <div class="document-thumb">
                    <a href="{{ item.Link }}">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                    </a>
                </div>
                {% endif %}
                <p class="document-description">{{ item.Description }}</p>
                <div class="document-meta">
                    {# 获取文档所属分类的名称和链接 #}
                    <span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
                    {# 格式化文档发布时间 #}
                    <span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>阅读量：{{ item.Views }}</span>
                </div>
            </li>
            {% empty %}
            {# 如果当前标签下没有文档，显示此内容 #}
            <li class="no-content">
                该标签下暂时没有相关文档。
            </li>
            {% endfor %}
        {% endtagDataList %}
    </ul>

    {# 渲染分页导航 #}
    <nav class="pagination-nav">
        {% pagination pages with show="5" %}
        <ul class="pagination-list">
            {# 首页链接 #}
            <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="pagination-info">
            总计 {{ pages.TotalItems }} 篇文档，共 {{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。
        </div>
        {% endpagination %}
    </nav>
</div>

In this example, we firsttagDetailThe tag obtained the name and description of the current tag, which is used as the title and introduction of the page. Next, usingtagDataListthe tag, totype="page"Obtained 10 documents per page, sorted in descending order by ID. While traversingarchivesWhen a variable is specified, we display the document's title, thumbnail, description, category, publish time, and reading volume. Finally, throughpaginationtags, with the help ofshow="5"parameters, we generate the complete page navigation.

Deep understanding: How to get Tag ID?

As mentioned before, in the tag detail page,tagDataListit will automatically identify the current page'stagId. But if we need to display a list of documents with a specific tag on other non-tag detail pages (such as the homepage or category list page), we need to manually specifytagId.

manually gettagIdHow many methods are there:

1. Check from the background: Log in to the AnQiCMS backend, go to the 'Content Management' -> 'Document Tags' page, each tag will have a unique ID that can be copied directly.
2. UsetagDetailTagIf you know the name or alias of the tag, you can go through the template firsttagDetailLabel to get its ID. For example: “`twig {% tagDetail specificTag with name=“Id” token=“anqicms” %} {# Assume the tag alias is