The document Tag list label `tagList`, detail label `tagDetail`, and document list label `tagDataList` how to implement the labelization display of content?

In website operation, efficient content management and flexible content display are key to improving user experience and search engine performance.AnQiCMS (AnQiCMS) is proficient in this field and provides powerful tagging functions to help us easily manage and display content with tags.tagList/tagDetailandtagDataListThese three core tags can give wings to the website content, making information organization more scientific, user search more convenient, and also lay a solid foundation for SEO optimization.

核心：Understanding the Tag Function of CMS

Content tags, as the name implies, are topics or keywords assigned 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 design was 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.

Tagging display not only enhances the internal links of the website, improves the correlation between pages, and helps search engines better understand the website structure; at the same time, it also greatly improves the user experience, allowing users to quickly find relevant content of interest through tags, increasing the website's stay time and conversion rate.

Label's Foundation: Tag List TagtagList

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

Principle and Application Scenarios:

tagListThe main function is to provide a label entry.For example, you may want to display "Popular Tags" or "Latest Tags" on the homepage of the website, or show related tags at the bottom of each article.Through this tag, visitors can get an overview of the various topics covered by the website's content and select tags of interest to further explore.

Common Parameters 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"Displays 10 starting from the third tag.
• itemIdIf you want to display tags related to the current document (such as articles or products), you can omit this parameter. It will default to reading the current document ID. To retrieve all tags instead of tags for 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, you can 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 from the website and display their titles and links in a list, for easy user access.

Explore in Depth: Tag Details TagtagDetail

When the user clicks on a label, and enters the exclusive page of that label, we need totagDetailTag details can be obtained and displayed to show the detailed information of the tag. This is similar to the article detail page displaying the content of the article, the tag detail page also needs to display the attributes of the tag itself.

Principle and Application Scenarios:

tagDetailMainly on the tag detail page (usually corresponding to the template filetag/detail.htmlortag/index.htmlUsed, depending on your routing configuration, to display the current visit tag's title, description, and even its Logo.This information is crucial for enriching the tag page content, enhancing user understanding, and optimizing the page's SEO.<title>embedded tag title, inmeta descriptionembedded tag description, can effectively improve the quality of the tag page

Common Parameters Explanation:

• idortoken：Used to specify the tag to get details.In the tag detail page, the system will automatically recognize the tag ID or URL alias (token) of the current page, so there is no need to set manually.id="1"(Label ID) ortoken="my-tag"(tag URL alias).

Keyword field (fields available with the name parameter):

• Id：The unique ID of the label.
• Title: The display title of the label.
• Link: The link to the label detail page.
• Description: The brief introduction or description of the label, very suitable for SEO.meta description.
• Content：If the label has detailed content (editable in the background), it can be obtained through this field.
• Logo：If the label has set a Logo or thumbnail, the image link can be obtained through this field.

Code example:

Display tag title and description 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 presentation: Tag document list tagstagDataList

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

Principle and Application Scenarios:

tagDataListCan be understood asarchiveListAn English version of the label list, mainly differing in that the filtering condition is based on the tag ID. When you want to list all articles or products tagged with the label on the tag detail page,tagDataListIt is**a choice. It is usually used withtagDetaillabels on the same label detail page to build a complete label theme page.

Common Parameters Explanation:

• tagId：This istagDataListThe core parameters, 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 get documents associated with a specific content model (such as an article model or product model) under the tag, you can specifymoduleIdfor examplemoduleId="1"Get articles.
• order：Used to specify the sorting method of the document,order="id desc"（按ID降序，即最新发布）、order="views desc"(Sort by view count in descending order).
• limit：Control the number of documents displayed per page, such aslimit="10".
• type: Typically set totype="page"to support pagination functionality, in conjunction withpaginationUse the label.

Code example:

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

`twig