How to use the `tagDetail` tag to get detailed information about a specific Tag, such as description and link?

In the Anqi CMS, tags (Tag) are important tools for organizing content, improving SEO, and enhancing user experience.Sometimes, we need not only to list tags, but also to display detailed information about a specific tag on the page, such as its description, link, and even Logo.tagDetailLabels come into play, they can help us easily obtain this data.

tagDetailLabel Overview

tagDetailThe main function of the label is to obtain detailed information of a single Tag label. Whether it is the detail page of the label itself, the list page, or the document detail page where you want to associate and display detailed data of a certain label,tagDetailCan provide flexible calling methods. Its basic usage form is as follows:

{% tagDetail 变量名称 with name="字段名称" id="标签ID" %}

Among them:

  • 变量名称is an optional parameter, if you want to store the value obtained in a variable for subsequent multiple uses, you can specify. If not specified,tagDetailthe result will be output directly.
  • name="字段名称"It is the key point, specifying the specific attribute of the Tag tag you want to retrieve, such as title, link, description, etc.
  • id="标签ID"ortoken="标签URL别名"It is also an optional parameter. If the page you are currently on is the page of the Tag tag (for example, the tag detail page), thentagDetailWill default to getting the current page's Tag information without specification.idortoken. But if you want to getnon-current pagea specific Tag information, you can do it byidEnglish for Tag's unique numeric ID ortokento accurately specify using Tag's URL alias.
  • siteIdThe parameter is used for multi-site scenarios, if you are managing multiple sites and want to access data from other sites, you can specify the site ID through this parameter.In general, you do not need to worry about this parameter.

Next, let's take a look atnameto obtain common tag information.

Detailed field analysis and application

tagDetailTagged throughnameThe parameter can retrieve a series of fields related to Tag. Understanding these fields and how to call them can give you more freedom in template design.

1. Tag ID (Id)

This is the unique numeric identifier for each tag.

{# 获取当前页面的Tag ID #}
<div>当前标签ID：{% tagDetail with name="Id" %}</div>

{# 获取指定ID为1的Tag ID #}
<div>指定标签ID：{% tagDetail with name="Id" id="1" %}</div>

{# 将Tag ID存储到变量中 #}
{% tagDetail myTagId with name="Id" %}
<div>我的标签ID是：{{ myTagId }}</div>

2. Tag Title (Title)

It is usually the display name of the tag and one of the most commonly used pieces of information.

{# 获取当前页面的Tag标题 #}
<h2>{% tagDetail with name="Title" %}</h2>

{# 获取指定ID为1的Tag标题 #}
<div>标签名称：{% tagDetail with name="Title" id="1" %}</div>

{# 将Tag标题存储到变量中 #}
{% tagDetail currentTagTitle with name="Title" %}
<h1>{{ currentTagTitle }}</h1>

3. Tag link (Link)

This is the URL address of the tag detail page, convenient for users to click and jump to the list of all content related to the tag.

{# 获取当前页面的Tag链接 #}
<p>查看更多相关内容：<a href="{% tagDetail with name="Link" %}">点击这里</a></p>

{# 获取指定ID为1的Tag链接 #}
<a href="{% tagDetail with name="Link" id="1" %}">查看指定标签内容</a>

{# 将Tag链接存储到变量中 #}
{% tagDetail tagUrl with name="Link" %}
<a href="{{ tagUrl }}">进入标签页面</a>

4. Tag description (Description)

Used to briefly introduce the purpose or content of the tag, which is helpful for SEO and user understanding.

{# 获取当前页面的Tag描述 #}
<p>标签简介：{% tagDetail with name="Description" %}</p>

{# 获取指定ID为1的Tag描述 #}
<div>这是一个关于：{% tagDetail with name="Description" id="1" %}</div>

{# 将Tag描述存储到变量中 #}
{% tagDetail tagIntro with name="Description" %}
<p>{{ tagIntro }}</p>

5. Index letter (FirstLetter)

If the label name is in English, this field will return the first letter (uppercase) to facilitate classification display in alphabetical order.

{# 获取当前页面的Tag首字母 #}
<span>标签首字母：{% tagDetail with name="FirstLetter" %}</span>

6. Label image (Logo)

If the thumbnail or Logo is set for the tag in the background, you can get the image link through this field.

{# 获取当前页面的Tag Logo #}
<img src="{% tagDetail with name="Logo" %}" alt="{% tagDetail with name="Title" %}" />

{# 获取指定ID为1的Tag Logo #}
<img src="{% tagDetail with name="Logo" id="1" %}" alt="{% tagDetail with name="Title" id="1" %}" />

7. Tag Content (Content)

This field can store more detailed label descriptions or related information, usually saved in rich text (HTML) or Markdown format.

{# 获取当前页面的Tag内容，注意使用 |safe 过滤器防止HTML被转义 #}
<div class="tag-full-content">{% tagDetail with name="Content" render=true %|safe}</div>

{# 获取指定ID为1的Tag内容，并存储到变量中 #}
{% tagDetail specificTagContent with name="Content" id="1" render=true %}
<div class="specific-tag-details">{{ specificTagContent|safe }}</div>

Please note that whenContentWhen the field contains HTML or Markdown content, it is recommended to use|safeA filter to ensure that the content is parsed correctly by the browser rather than displayed as plain text. If your backend has enabled the Markdown editor and the Content is in Markdown format, you will also need to addrender=true参数，让系统在输出前将其转换为HTML。 English

Actual application example

Suppose you are building a tag list page for AnQi CMS, or you need to display detailed information about the current document's tags in the sidebar of a document detail page.

Scene one: Display the detailed information of the current tag on the tag detail page

Intemplate/你的模板目录/tag/detail.htmlortag/list.html(If configured as Tag detail page), you can call it like this:

<div class="tag-header">
    <h1>{% tagDetail with name="Title" %}</h1>
    <p class="tag-description">{% tagDetail with name="Description" %}</p>
    {% tagDetail tagLogo with name="Logo" %}
    {% if tagLogo %}
        <img src="{{ tagLogo }}" alt="{% tagDetail with name="Title" %}" class="tag-logo">
    {% endif %}
    <div class="tag-content">
        {% tagDetail tagFullContent with name="Content" render=true %}
        {{ tagFullContent|safe }}
    </div>
    <a href="{% tagDetail with name="Link" %}" class="btn btn-primary">查看所有关联内容</a>
</div>

This example demonstrates how to directly retrieve and present the title, description, Logo, and detailed content of a tag on its dedicated page, while also providing a button linking back to itself.

Common Questions (FAQ)

  1. Q:tagDetailLabel will obtain which Tag's information by default?Answer: If you do not provideidortokenparameters,tagDetailLabels will intelligently attempt to retrieve the Tag information associated with the current page.For example, on the Tag detail page (the URL contains Tag ID or alias), it will automatically recognize and display the current Tag's data.tagDetail will notAutomatically obtain the Tag information of the current document, you need totagListGet the Tag list first and then call it in a looptagDetailor throughtagDetailofidParameters specified.

  2. Question: How to display the details of a specific Tag associated with the current document in the document detail page?Answer: In the document detail page, you first need to usetagListLabel to get the current document's associated Tag list. Then, you can iterate over this list, and for each Tag in the list,tagDetailTags, throughtagDetailofidparameter (passed in)item.Id）来获取每个 Tag 的具体信息。

  3. Q:DescriptionandContentfield, what are the differences?Answer:Description通常用于存储简短的标签简介，字数较少，主要用于列表展示、SEO元数据（<meta name="description">）等场景。而ContentThe field can store more detailed and rich text and image content, which may include HTML or Markdown format, used to display as text in the tag detail page. When invokingContentWhen the field contains HTML or Markdown, please be sure to use|safethe filter, and add for Markdown contentrender=trueParameter, to ensure that the content is correctly parsed and displayed.