How to implement the labeling display of document Tag list label `tagList`, detail label `tagDetail`, and document list label `tagDataList`?

In website operation, efficient content management and flexible content display are the key to improving user experience and search engine performance.AnQiCMS (AnQiCMS) understands this well, providing powerful tag functions to help us easily realize the labeling management and display of content.By clever usetagList/tagDetailandtagDataListThese three core tags can give wings to the content of the website, making information organization more scientific, user search more convenient, and also lay a solid foundation for SEO optimization.

Core: Understand the Tag Function of AnQi CMS

Content tags, as the name implies, are thematic or keyword labels applied to website content. They are more flexible than traditional categories and can associate content across different categories and content models (such as articles, products). The tag function of Anqi CMS starts fromv2.1.0Version starts supporting, its original intention is to help operators better organize and present content.In the background, you can add multiple tags to each document and independently manage each tag, including setting tag names, custom URLs, SEO titles, and descriptions, all of which lay the foundation for the tag-based display of front-end content.

Labeling not only enhances the internal links of the website, improves the correlation between pages, and helps search engines better understand the structure of the website; at the same time, it greatly improves the user experience, allowing users to quickly find the relevant content they are interested in, and increase the stay time and conversion rate of the website.

The foundation of tags: Tag list tagstagList

tagListTags are used to display a list of tags, which is the foundation for the display of tagged content.It can help us list tag sets that exist or are related to specific content in any location on the website, such as the sidebar, bottom of articles, homepage, etc.

Working principle and usage scenarios:

tagListThe main function is to provide label entries. For example, you may want to display 'Hot Tags' or 'Latest Tags' on the homepage of the website, or display tags related to the article at the bottom of each article.Through this tag, visitors can view all the various topics covered on the website and choose to explore further according to their interests.

Common parameter explanation:

• limit: Control the number of displayed tags, for examplelimit="10"It will display the latest 10 tags. It also supportsoffsetpattern, such aslimit="2,10"Indicate that starting from the third tag, 10 are displayed.
• itemIdIf you wish to display tags related to the current document (such as an article or product), you can omit this parameter, and it will default to reading the current document ID. To retrieve all tags instead of the tags of a specific document, you can setitemId="0".
• letter: Used to filter tags alphabetically, for exampleletter="A"Only show tags that start with A.
• categoryId: If you need to filter tags by category, specify the category ID.

Code example:

To display a column of popular tags on the web page:

<div>
    <h3>热门标签</h3>
    <ul>
    {% tagList tags with limit="15" %}
        {% for item in tags %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
        {% endfor %}
    {% endtagList %}
    </ul>
</div>

This code will retrieve the latest 15 tags on the website and display their titles and links in a list for easy user access.

Deep Dive: Tag Details TagtagDetail

When the user clicks on a tag and enters the exclusive page of that tag, we needtagDetailTag to get and display the detailed information of the tag. This is like the article detail page displaying the article content, the tag detail page also needs to display the attributes of the tag itself.

Working principle and usage scenarios:

tagDetailMainly in the label detail page (usually corresponding to the template file)tag/detail.htmlortag/index.htmlIt depends on your routing configuration) used to display the current access tag title, description, and even its Logo.This information is crucial for enriching the tag page content, enhancing user understanding, and optimizing the SEO of the page.For example, in the page title<title>embed the label title inmeta descriptionembed the label description, which can effectively improve the quality of the label page

Common parameter explanation:

• idortoken: Used to specify the tag to be retrieved for details. Usually on the tag detail page, the system automatically identifies the tag ID or URL alias (token) of the current page, so there is no need to set it manually.If you need to get the details of a specific tag on another page, you need to input it manuallyid="1"(label ID) ortoken="my-tag"(Label URL alias).

Keyword field (fields available with the name parameter):

• Id: Unique ID of the label.
• Title: Display title of the label.
• Link: Link to the label detail page.
• Description: The label's introduction or description, very suitable for SEO.meta description.
• Content: If the label has detailed content (can be edited in the background), it can be obtained through this field.
• LogoIf the tag has set a Logo or thumbnail, the image link can be obtained through this field.

Code example:

The tag title and description are displayed on the tag detail page:

<title>{% tagDetail with name="Title" %} - 标签详情 - {% system with name="SiteName" %}</title>
<meta name="description" content="{% tagDetail with name="Description" %}">

<div>
    <h1>{% tagDetail with name="Title" %}</h1>
    <p>{% tagDetail with name="Description" %}</p>
    {% tagDetail tagContent with name="Content" %}
    {% if tagContent %}
    <div class="tag-content">
        {{ tagContent|safe }} {# 确保HTML内容安全输出 #}
    </div>
    {% endif %}
</div>

Content display: Tag document list tagtagDataList

tagDataListTags are the core of tag-based display, responsible for retrieving and displaying all document content associated with the current (or specified) tag, such as articles, products, and so on.This makes the tag page not only a display of tag information, but also a portal for aggregating related content.

Working principle and usage scenarios:

tagDataListCan be understood asarchiveListA special version of the document list tag, the main difference being that the filtering criteria are based on tag ID. When you want to list all articles or products tagged with that tag on the tag detail page,tagDataListThis is the** selection. It is usually used withtagDetailtags on the same tag detail page to build a complete tag theme page.

Common parameter explanation:

• tagIdThis istagDataListThe core parameter, used to specify which label's documents to retrieve. On the label detail page, the system will automatically identify the current label's ID.
• moduleId: If you want to retrieve documents associated with a specific content model (such as an article model or product model) under the tag, you can specifymoduleIdFor examplemoduleId="1"Retrieve articles.
• order: Used to specify the sorting method of the document, such asorder="id desc"(Sorted by ID in descending order, i.e., the latest release),order="views desc"(Sorted by views in descending order).
• limit: Controls the number of documents displayed per page, such aslimit="10".
• type: Usually set totype="page"to support pagination, in cooperation withpaginationlabel usage

Code example:

Display the list of articles associated with the tag on the tag detail page (and support pagination):

`twig\n<div class=\