In AnQi CMS, managing and displaying content, the tag (Tag) is undoubtedly a very flexible and powerful tool.It can help us classify content in multiple dimensions, not only convenient for visitors to find topics of interest, but also effectively improve the website's SEO performance.Today, let's delve deeply into how to elegantly display the list of all documents under a specific tag (Tag) on your website.

Backend preparation: Make sure the tags are set properly

Before the front-end display begins, we need to make sure that the background tag settings are complete and standardized.

Firstly, you can go to the Anqi CMS backend.Content Managementarea, findDocument TagModule. Here, you can create, edit, and manage all the tags of the website.It is recommended to set a clear 'label name' and meaningful 'label introduction' for each tag, which helps optimize the SEO of the tag page.

Secondly, when you publish or edit a document (whether it is an article or a product), be sure to add relevant tags in the "Tag label" field.You can choose an existing tag or directly enter a new one.Only when documents are associated with tags can they be effectively aggregated and displayed on the front end.

The core feature is revealed: Understanding the wonder of template tags

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

• tagDetailUsed to obtain detailed information about a specific tag, such as tag ID, title, description, and link. This is very useful when building the header information of a tab page.
• tagList: Used to retrieve a list of tags, for example, to display all tags associated with a document or to display all popular tags on a website.
• tagDataList:This is the main character of today!It is specifically used to retrieve the list of all documents under a specified tag.

To display the document list under a specific Tag,tagDataListThe tag is indispensable. It provides rich parameters, allowing you to precisely control the filtering, sorting, and display of content:

• tagId: This is the core parameter to specify which document label you want to display. If you are currently on a label detail page (for example,tag/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.), you need to specify it explicitlytagId.
• moduleId: If your website uses a different content model (such as article model, product model, etc.), you can specify this parameter to only display documents under a specific model. For example,moduleId="1"This is usually used to retrieve the document of the article model.
• type: This parameter determines the type of the list.type="list"It will simply list a specified number of documents, whiletype="page"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"It will display 10 documents.
• order: Defines the sorting method of the documents, you can sort by publish time (order="id desc"), views (order="views desc"）or custom sorting in the background（order="sort desc"）etc. for setting。“
• siteId: If you manage multiple sites and want to call data from other sites, you can specify the site ID through this parameter。“

Practice exercise: Use tags to display document lists in templates

Now, let's see how to use specific code examples to apply them in different scenariostagDataList.

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

When a user clicks on a tag, it usually jumps to a dedicated tag list page. On this page,tagDataListThe tag will automatically identify the tag ID of the current page, without us manually entering ittagId. At the same time, in order to provide a better user experience, we usually add pagination features.

Assuming your template file istag/list.htmlThe code structure may look like this:

”`twig {# Get the details of the current tag for use in the 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}}