Prepare backstage: Make sure the tag settings are correct

Before displaying the front-end, we need to ensure that the back-end tags are complete and standardized.

Firstly, you can go to the Anqi CMS back-end.Content managementArea, findDocument LabelModule.Here, you can create, edit, and manage all the tags of the website.Suggest setting a clear 'label name' and meaningful 'label introduction' for each tag, which helps optimize the SEO of the tag page.

Next, when you publish or edit documents (whether articles or products), be sure to add relevant tags in the 'Tag tags' field.You can select existing tags or directly input new tags.Only when the document is associated with tags, can we effectively aggregate and display them on the front end.

Core feature revelation: Understanding the wonder of template tags

AutoCMS provides powerful and easy-to-use template tags, allowing us to flexibly call various contents on the front end. For the document list under the tags, we will mainly use the following key tags:

• tagDetail: Used to obtain detailed information of a specific tag, such as tag ID, title, description, and link, etc. This is very useful when building the header information of the tag page.
• tagListThis is used to get the list of tags, for example, to display all the tags associated with a document or to display all the popular tags of a website.
• tagDataList:This is the highlight of our topic today!It is used specifically to get the list of all documents under a specified tag.

To display the document list under a specific Tag,tagDataListTags are indispensable. They provide rich parameters, allowing you to precisely control the filtering, sorting, and display of content:

• tagId: This is the core parameter used to specify which label's documents you want to display. If you are currently on a label detail page (such astag/list.htmlortag/index.htmlSuch a template), the system will automatically recognize the current pagetagIdAt this time, you can omit this parameter. If it is called on other pages (such as the homepage, category pages, etc.), it needs to be explicitly specifiedtagId.
• moduleIdIf your website uses a different content model (such as article model, product model, etc.), you can specify this parameter to display documents under a specific model only. For example,moduleId="1"This is commonly used to get the document of the article model.
• type: This parameter determines the type of the list.type="list"It will simply list the specified number of documents,type="page"and it will generate a document list with pagination features.
• limit: Used to control the number of documents displayed per page or per call. For examplelimit="10"10 documents will be displayed.
• order: Defines the sorting method of the documents, you can sort by publish time (order="id desc"), and page views (order="views desc") or custom sorting in the background (order="sort desc"）等进行设置。
• siteId: If you manage multiple sites and want to call data from other sites, you can specify the site ID through this parameter.

实战演练：在模板中运用标签显示文档列表

现在，让我们通过具体的代码示例，看看如何在不同场景下运用tagDataListLabel.

Scene one: Show all documents under the current tag on the tag list page (tag/list.html)

When the user clicks a label, it usually jumps to a dedicated label list page. On this page,tagDataListThe label will automatically identify the current page's label ID, without the need for us to manually input ittagId. In order to provide a better user experience, we usually add pagination features.

Assuming your template file istag/list.html, the code structure may be as follows:

`twig {# Retrieve detailed information of the current tag for use in page title and description #} {% tagDetail currentTag with name=“Title” %} {% tagDetail tagDescription with name=“Description” %}

{# 使用 tagDataList 获取当前标签下的文档列表，并启用分页 #}
{% tagDataList archives with type="page" limit="10" order="id desc" %}
    {% for item in archives %}
    <article class="document-item">
        <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
        {% if item.Thumb %}
            <div class="document-thumbnail">
                <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>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量: {{item.Views}}</span>
        </div>
    </article>
    {% empty %}
    <p>当前标签下暂时没有文档。</p>
    {% endfor %}
{% endtagDataList %}

{# 添加分页导航 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        <ul>
            {% if pages.FirstPage %}
            <li><a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
            {% endif %}
            {% if pages.PrevPage %}
            <li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
            {% endif %}
            {% for item in pages.Pages %}
            <li><a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}