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

As an experienced website operations expert, I am happy to give you a detailed explanation of 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 details 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 can not only help users find related content quickly but also effectively improve the website's SEO performance.AnQiCMS knows this and therefore provides a dedicated tag (Tag) feature in the template system, allowing you to easily display the details of a single tag on the website front end.

Understanding the template basics of AnQiCMS

AnQiCMS's template engine adopts syntax similar to Django, which is widely welcomed for its intuitiveness and flexibility. In AnQiCMS, you will mainly come across two symbols: double braces{{变量}}Used to output variable values, while a single curly brace with a percentage sign{% 标签 %}is used to perform logical control, introduce other templates, or call data tags. All template files are usually stored in/templatethe directory, and.htmlAs a suffix. In these files, you can use built-in tags to dynamically fill in content.

For displaying tag information, AnQiCMS provides a namedtagDetailThe core tag, which allows you to extract detailed data of a specific tag.

tagDetailTag: The core tool for getting a single Tag.

tagDetailThe tag is the key to obtaining detailed information about a single Tag in the AnQiCMS template.It is mainly used to retrieve all related attributes of the tag based on its unique identifier (ID or URL alias).

This is the basic way to use the tag:

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

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

It is noteworthy that you have already configured the URL statics of the tags in the AnQiCMS backend, and the current page itself is a tag detail page (for example:/tag/某个标签别名ThenidortokenThe parameter can usually be omitted,tagDetailThe tag will automatically identify and retrieve the tag information of the current page. But if you need to retrieve the tag information of a non-tag page or specify a non-current page, you need to provide the parameters explicitly.idortokenparameters.

An in-depth analysis: Information of available Tag fields

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

1. Tag ID (Id)This is the unique identifier of the tag. In some cases, you may need it for internal logic judgment or to 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 the page. When displaying label clouds, label lists, or label detail pages,Titleis 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. Tag description (Description)On AnQiCMS backend, you can add a description 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, and 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,FirstLetterthe field comes in handy. It is usually used to build 'A-Z' tag navigation or tag cloud classification.

   <p>索引字母：{% tagDetail with name="FirstLetter" %}</p>
   

6. Label Logo (Logo)Sometimes, you may want to configure an icon or a small image for a specific tag to enhance visual recognition.LogoThe field is born 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.),ContentA field can display this content. Particularly, if the Markdown editor is enabled, you can also userender=trueThe parameter converts Markdown formatted content to HTML for display.

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

Actual application: Display Tag details in the template.

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 customizedtag/detail.html) Organize your code in this way:

”`twig {# Assume this is a tag detail page, it will automatically recognize the current tag #} {% tagDetail currentTag with name=“Title” %} {% if currentTag %}

<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