How to display the list of all associated documents under the Tag tag detail page?

As an experienced website operations expert, I deeply understand the core role of tags (Tag) in content management and website optimization.A well-designed tagging system not only enhances user experience and helps visitors quickly find content of interest, but is also an indispensable part of search engine optimization (SEO).AnQiCMS (AnQiCMS) provides very flexible and powerful support for the Tag tag function, making it easy to achieve this goal.

Today, let's delve deeply into how to elegantly display the list of all associated documents under the Tag detail page in AnQiCMS.This is not only a technical operation, but also a content operation strategy that can significantly improve the organization and discoverability of website content.

Guidelines for displaying the associated document list on the Tag label detail page of AnQi CMS

In content operations, tags (Tag) are powerful tools for connecting content, improving user experience, and enhancing SEO performance.AnQi CMS with its concise and efficient architecture provides us with a perfect Tag tag management mechanism.Through this article, we will step by step reveal how to intelligently and comprehensively display all associated documents on the Tag tag detail page, thereby transforming these technical advantages into tangible operational benefits.

1. Understanding the role of Tag labels and their function in AnQi CMS

In AnQi CMS, a Tag is not just a simple keyword, it represents a dimension of content classification and aggregation.Different from the traditional category (Category), tags are usually more flexible and refined, and a document can have multiple tags.For example, an article about the 'AnQiCMS Deployment Tutorial' can be tagged with 'Go language', 'CMS', 'Tutorial', 'Deployment', 'Docker', and many other tags, allowing users to discover content from different perspectives.

The Tag function of AnQi CMS, as it ishelp-content-tag.mdAs described in the document, it allows us to easily create, manage and edit these tags.Each tag has its own name, index letter, custom URL, even SEO title and description, all of which lay the foundation for building highly optimized tag pages.

Second, locate the Tag label detail page template

In AnQi CMS template design system, each specific type of page has its corresponding default template file. According todesign-director.mdthe convention, the Tag label detail page usually corresponds to the/template/你的模板目录/tag/list.htmlor/template/你的模板目录/tag/index.htmlHere, we mainly focus ontag/list.htmlbecause it is specifically used to display the list of documents associated with Tag

To begin our operation, you need to enter the template directory of the website, find the template folder currently in use, and locate totag/list.htmlFile. If the file does not exist, you can manually create one based on the default template structure of Anqi CMS. This file is the 'canvas' we will be editing the code on.

Three, get the details of the current Tag

On the Tag detail page, visitors first hope to clearly understand which Tag they are browsing and the content overview that this Tag may bring. Anqi CMS provides a very convenient template tagtagDetail(See alsotag-/anqiapi-tag/148.htmlUsed to retrieve all information of the current Tag.

You can intag/list.htmlAt the top of the template file or at any position you want to display Tag information, usetagDetailTag to get the title, description, and other core data of the current Tag. Usually, when you are using the Tag details pagetagDetailyou do not need to specify explicitlyidortokenParameters, AnQi CMS will intelligently identify the Tag ID of the current page.

Here is a simple example showing how to retrieve and display the title and description of the current Tag.

{# 获取当前Tag的详细信息 #}
{% tagDetail tagInfo %}
    <header class="tag-header">
        <h1>{{ tagInfo.Title }}</h1>
        {% if tagInfo.Description %}
            <p>{{ tagInfo.Description }}</p>
        {% endif %}
    </header>
{% endtagDetail %}

Here, tagInfoIt is a custom variable name that includes various attributes of the current Tag, such asTitle(Title) andDescription(Description). In this way, the top of the page can clearly display the theme of the Tag, providing the user with clear context.

4. Call and display the list of related documents.

This is the core part of our operation. Anqi CMS provides a special label for retrieving the document list associated with Tag:tagDataList(See alsotag-/anqiapi-tag/149.htmlThis tag can intelligently get all documents associated with the current Tag page and supports pagination display.

Intag/list.htmlIn, you will usetagDataListLabels to loop through these documents. To implement pagination of the document list, we usually willtypethe parameter to"page", and uselimitParameters to control the number of documents displayed per page.

The following code snippet demonstrates how to display the associated document list on the Tag detail page and show the title, link, thumbnail, publication time, and views for each document:

{# 循环遍历关联文档列表，并支持分页 #}
{% tagDataList archives with type="page" limit="10" %}
    <div class="tag-document-list">
        {% for item in archives %}
            <article class="document-item">
                <a href="{{ item.Link }}" title="{{ item.Title }}">
                    {% if item.Thumb %}
                        <div class="document-thumb">
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                        </div>
                    {% endif %}
                    <h2 class="document-title">{{ item.Title }}</h2>
                </a>
                {% if item.Description %}
                    <p class="document-description">{{ item.Description|truncatechars:120 }}</p>
                {% endif %}
                <div class="document-meta">
                    <span>发布于: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>阅读量: {{ item.Views }}</span>
                </div>
            </article>
        {% empty %}
            <p class="no-documents">当前Tag下暂无关联文档。</p>
        {% endfor %}
    </div>
{% endtagDataList %}

In this code block:

• tagDataList archives with type="page" limit="10": We declare a variable namedarchivesThe variable is used to store the associated document list and enable pagination mode(type="page") Displaying 10 documents per page.
• {% for item in archives %}: Loop through.archivesarray,itemThe variable represents each document.
• item.Link、`