How to retrieve and display the details of a specific `tagDetail` tag?

AnQiCMS (AnQiCMS) provides a series of powerful template tags to help website operators efficiently display content. Among them,tagDetailTags are a key tool for retrieving and displaying specific tag details. Whether it's building a beautiful tag detail page, or referencing related tag data on other pages,tagDetailAll can provide flexible and intuitive solutions.

tagDetailLabel: The tool for obtaining detailed label information.

In Anqi CMS, tags (Tag) are not only a way to classify content, but they can also have rich details such as tag names, descriptions, exclusive images, and even custom content.tagDetailThe role of tags is precisely to accurately extract and display these tag data stored in the background on the front end of the website.

Imagine that you want to create an independent page for each tag, where there is not only the name of the tag, but also a detailed introduction, even a beautiful image that represents the tag.Or, do you want to display a brief description of a related tag at the bottom of the article detail page.tagDetailTags can easily handle it.

tagDetailThe core usage of tags

tagDetailThe basic usage format of the label is very concise:{% tagDetail with name="字段名称" %}In this structure,nameThe parameter is the core, specifying the specific tag information you want to retrieve.

Additionally, in order to achieve more accurate calls,tagDetailThe tag supports the following important parameters:

  • id: Retrieve the detailed information of the tag by specifying its unique numeric ID. For example,id="1"The tag data with ID 1 will be retrieved.
  • tokenIf your tag is configured with a custom URL alias (slug), you can usetokento retrieve tag information via the alias. For example,token="seo-optimization"Retrieve the tag data with the alias 'seo-optimization'.
  • siteIdWhen you deploy multiple sites, you can specify which site to retrieve tag data from with this parameter. Generally, if you only manage a single site, this parameter does not need to be filled in.

It is worth noting that if the current page context itself is a tag detail page (for example, you are visitingyourdomain.com/tag/seo-optimization), and you aretagDetailnot explicitly specified in the tagidortokenIt will automatically retrieve the tag information of the current page.

Detailed information field parsing

BynameParameters, you can access various properties of the tag to flexibly display on the front end:

  • Label ID (Id): Get the unique identifier of the label.
    
<div>标签ID：{% tagDetail with name="Id" %}</div>
{# 或者赋值给变量： #}
{% tagDetail currentTagId with name="Id" %}{{ currentTagId }}
  • Label title (Title): Get the display name of the label, which is the most commonly used field.
    
<h1>{% tagDetail with name="Title" %}</h1>
  • Label link (Link)Get the URL address of the tag detail page for easy creation of jump links.
    
<a href="{% tagDetail with name="Link" %}">前往标签页</a>
  • Tag description (Description): Obtain a brief or detailed description of the label, usually used in the overview of the label detail page.
    
<p>{% tagDetail with name="Description" %}</p>
  • Label index letter (FirstLetter): Retrieve the first letter of the tag name, commonly used in the tag index list sorted by alphabet.
    
<span>标签首字母：{% tagDetail with name="FirstLetter" %}</span>
  • Tag content (Content)If the label is set to detailed content in the background (supports Markdown), it can be obtained through this field. The content supports Markdown rendering, and to safely display HTML, it usually needs to be配合safefilter.
    
<div>
    {% tagDetail tagContent with name="Content" render=true %}
    {{ tagContent|safe }}
</div>
    Please noterender=trueYou can force the conversion of Markdown content.
  • Label Logo (Logo): Get the exclusive Logo image address configured for the label, convenient for display on the page.
    
<img src="{% tagDetail with name="Logo" %}" alt="{% tagDetail with name="Title" %} Logo">

Practical Application Example: Build the Tag Detail Page Header

Suppose you are designing a tag detail page (tag/detail.htmlortag/index.html), hoping to display the basic information of the tag:

`twig

{# 显示标签标题 #}
<h1>{% tagDetail with name="Title" %}</h1>

{# 显示标签Logo，如果存在 #}
{% tagDetail tagLogo with name="Logo" %}
{% if tagLogo %}
    <img src="{{ tagLogo }}" alt="{% tagDetail with name="Title" %} Logo" class="tag-logo">
{% endif %}

{# 显示标签描述，如果存在 #}
{% tagDetail tagDescription with name="Description" %}
{% if tagDescription %}
    <p class="tag-description">{{ tagDescription }}</p>
{% endif %}

{# 提示更多相关文章的链接 #}
<p>
    探索更多关于 "{{% tagDetail with name="Title" %}}" 的内容：
    <a href="{% tagDetail with name="Link" %}">查看所有相关文章</a>
</p>

{# 如果标签内容中有详细的介绍，可以在这里展开 #}
{% tagDetail tagContent with name="Content" render=true %}
{% if tagContent %}
    <div class="tag-full-content">
        <h2>标签详细介绍</h2>
        {{ tagContent|safe }}
    </div>
{% endif %}