How to display the detailed information of a single Tag in AnQiCMS template?

As a senior website operation expert, I am happy to elaborate in detail on how to flexibly and efficiently display the detailed information of a single Tag in AnQiCMS.AnQiCMS with its concise and efficient architecture provides powerful template customization capabilities for content operators.To deeply understand the presentation of a single Tag information, we first need to start with its template mechanism and core tags.

How to display the detailed information of a single Tag in AnQiCMS template?

In the practice of content operation, tags (Tag) are an important bridge connecting content and user interests.A well-designed tag page that not only helps users find related content quickly but also effectively improves the website's SEO performance.AnQiCMS knows this, therefore it provides a special Tag feature in the template system, allowing you to easily display detailed information of a single Tag on the website frontend.

Understanding the template basics of AnQiCMS

AnQiCMS's template engine uses syntax similar to Django, which is widely welcomed for its intuitiveness and flexibility. In AnQiCMS, you will mainly encounter two symbols: double curly braces{{变量}}Used to output variable values, while single curly braces with a percentage sign{% 标签 %}is used for logical control, including other templates, or calling data tags. All template files are usually stored in/templatedirectory, and named with.htmlEnglish suffix. In these files, you can use built-in various labels to dynamically fill content.

AnQiCMS provides a label calledtagDetailThe core tag, which allows you to extract detailed data of a specific tag.

tagDetailTag: The core tool for getting a single Tag.

tagDetailThe label is the key to obtaining detailed information of a single Tag in the AnQiCMS template.Its main function is to retrieve all related attributes of the label based on the unique identifier (ID or URL alias) of the label.

The basic usage of this tag is as follows:

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

Here,变量名称This is a temporary variable you define, used to store the label data obtained;name="字段名称"It specifies the specific information field you want to obtain;id="标签ID"ortoken="标签URL别名"It is used to clearly specify which label's data it is.

It is worth noting that when you have already configured the URL rewrite for the tag in the AnQiCMS backend, and the current page itself is a tag detail page (for example,/tag/某个标签别名), thenidortokenThe parameter is usually optional,tagDetailLabels will be automatically recognized and obtain the label information of the current page. But if it is necessary to provide label information on non-label pages or specify a label information of a non-current page, it is necessary to provide it explicitly.idortokenthe parameters.

Deep Analysis: Information of Available Tag Fields

tagDetailTags can provide various attributes of Tag for you, helping you build a colorful and rich tag page. The following are several commonly used fields with practical operation value:

  1. Label ID (Id)This is the unique numeric identifier of the label. In some cases, you may need it to make internal logic judgments or associate with other data.

    <div>标签ID:{% tagDetail with name="Id" %}</div>
    
  2. Label title (Title)This is the name of the label, which is the text that the end user sees and clicks on in the page. It is displayed when showing the tag cloud, tag list, or tag detail page.TitleIt is the core display content.

    <h2>标签名称:{% tagDetail with name="Title" %}</h2>
    
  3. Label link (Link) LinkThe field provides the URL to access all content under the label. It is essential for building clickable label names or navigation.

    <p><a href="{% tagDetail with name="Link" %}">查看{% tagDetail with name="Title" %}下的所有内容</a></p>
    
  4. Label description (Description)In AnQiCMS backend, you can add a description text for each tag.This description is particularly important on the tag detail page, as it explains the definition and scope of the tag to search engines and users, which is very beneficial for SEO optimization.

    <meta name="description" content="{% tagDetail with name="Description" %}">
    <p>简介:{% tagDetail with name="Description" %}</p>
    
  5. Label index letter (FirstLetter)If your website has a large number of tags and needs to be sorted alphabetically by index,FirstLetterthe field comes in handy. It is usually used to build "A-Z" tag navigation or categorized tag clouds.

    <p>索引字母:{% tagDetail with name="FirstLetter" %}</p>
    
  6. Tag Logo (Logo)Sometimes, you may want to configure an icon or small image for a specific tag to enhance visual recognition.LogoFields are created for this.

    {% tagDetail tagLogo with name="Logo" %}
    {% if tagLogo %}<img src="{{ tagLogo }}" alt="{% tagDetail with name='Title' %}" style="max-width: 100px;">{% endif %}
    
  7. Tag content (Content)If you have written more rich text content for the tag in the background (such as an introduction about this tag, related history, or popular discussions, etc.),ContentThe field can display this content. Specifically, if the Markdown editor is enabled, you can also take advantage ofrender=trueThe content in Markdown format is converted to HTML for display.

    <div class="tag-full-content">
        {% tagDetail tagContent with name="Content" render=true %}{{ tagContent|safe }}
    </div>
    

Actual application: Displaying Tag details in templates.

Imagine, you want to create a dedicated tag detail page to display the title, description, possibly a Logo, and a link to all articles under the tag. You can do this in a template file (for exampletemplate/default/tag/list.htmlor a custom onetag/detail.htmlOrganize your code in this way:

English

<div class="tag-detail-header">
    {# 显示标签名称 #}
    <h1>{{ currentTag }}</h1>

    {# 如果标签有Logo,则显示Logo #}
    {% tagDetail tagLogo with name="Logo" %}
    {% if tagLogo %}
        <div class="tag-logo">
            <img src="{{ tagLogo }}" alt="{{ currentTag }}">
        </div>
    {% endif %}

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

    {# 显示完整的标签内容,如果包含富文本或Markdown #}
    {% tagDetail tagRichContent with name="Content" render