How to retrieve and display detailed information of a single Tag label (title, description, Logo)?

In AnQi CMS, tags (Tag) are an important way to organize and associate content.Sometimes, we not only need to list tags, but also hope to display detailed information about a single tag on an independent page or in a specific area, such as its title, description, and even a representative Logo.The AnQi CMS provides a concise and efficient method to meet this requirement.

Understanding the source of Tag information

In the Anqi CMS backend, you can configure detailed information for each tag.Enter the 'Content Management' under the 'Document Tags' module, and you will find that each tag not only has a 'Tag Name', but can also fill in a 'Tag Description' (Description), 'SEO Title', 'Tag Keywords', and even upload a 'Logo' image.This information maintained in the background is the basis that we can obtain and display in the frontend template.

UsetagDetailRetrieve Single Tag Details

AnQi CMS provides dedicated template tagstagDetailGet detailed data for a single tag. This tag is designed to be very flexible, and it can be used on the tag detail page (such astag/detail.htmlortag/list.htmlIn such a template, the system automatically identifies the tag ID of the current page), and can also retrieve specific tag information on any other page by specifying the tag ID or its URL alias.

Basic Usage

When you are on a tag detail page,tagDetailthe tag will automatically recognize the tag information of the current page. For example, if you visitexample.com/tag/seoso thattagDetailit will default to retrieving all information about the 'SEO' tag.

{# 在标签详情页，系统会自动识别当前标签 #}
{% tagDetail tagInfo %}
    <h1>{{ tagInfo.Title }}</h1>
    {% if tagInfo.Logo %}
        <img src="{{ tagInfo.Logo }}" alt="{{ tagInfo.Title }} Logo" />
    {% endif %}
    <p>{{ tagInfo.Description }}</p>
    {# 如果标签有更长的内容（Content字段），可能需要使用|safe过滤器 #}
    {% if tagInfo.Content %}
        <div class="tag-content">{{ tagInfo.Content|safe }}</div>
    {% endif %}
{% endtagDetail %}

Here we used{% tagDetail tagInfo %}Assign all the details of the current tag to a variable namedtagInfo, and then call its properties throughtagInfo.Title/tagInfo.Logo/tagInfo.Descriptionsuch as.

Get the detailed information of a specified Tag

If you want to display information about a specific tag on a non-tag detail page (such as the homepage, article detail page, or a custom page), you can do so byidortokenParameters can be used to explicitly specify the tag to be retrieved.

Suppose you want to retrieve the details of the tag with ID5: The tag details of

{# 获取ID为5的标签信息 #}
{% tagDetail specificTag with id="5" %}
    <h2>指定标签：{{ specificTag.Title }}</h2>
    {% if specificTag.Logo %}
        <img src="{{ specificTag.Logo }}" alt="{{ specificTag.Title }} Logo" class="small-tag-logo" />
    {% endif %}
    <p>简介：{{ specificTag.Description }}</p>
    <a href="{{ specificTag.Link }}">查看更多关于 {{ specificTag.Title }} 的内容</a>
{% endtagDetail %}

Similarly, you can also use the URL alias of the tagtoken) to specify a label, which is typically the English name or pinyin of the label in pseudo-static configuration:

{# 获取URL别名为 "anqicms-tutorial" 的标签信息 #}
{% tagDetail tutorialTag with token="anqicms-tutorial" %}
    <h3>{{ tutorialTag.Title }}</h3>
    <p>这个标签的描述是：{{ tutorialTag.Description }}</p>
{% endtagDetail %}

Practice for displaying title, description and Logo

Now, let's combine and see an example of how to fully display a label's title, description, and Logo on a page:

<div class="tag-detail-card">
    {# 通过tagDetail标签获取当前页面（或指定ID/token）的标签详细信息 #}
    {% tagDetail currentTag %}
        <h2 class="card-title">{{ currentTag.Title }}</h2>

        {% if currentTag.Logo %}
            <div class="card-image">
                {# 展示Logo图片，并为其添加alt属性以优化SEO和可访问性 #}
                <img src="{{ currentTag.Logo }}" alt="{{ currentTag.Title }} 专属Logo" />
            </div>
        {% else %}
            {# 如果没有Logo，可以显示一个默认图标或提示 #}
            <div class="card-no-image">
                <i class="icon-tag"></i> <span>{{ currentTag.Title }}</span>
            </div>
        {% endif %}

        <div class="card-description">
            {# 展示标签的描述信息 #}
            <p>{{ currentTag.Description }}</p>
        </div>

        {# 添加一个链接，让用户可以点击查看该标签下所有的文章 #}
        <div class="card-link">
            <a href="{{ currentTag.Link }}">探索更多关于 {{ currentTag.Title }} 的内容 &raquo;</a>
        </div>
    {% endtagDetail %}
</div>

In this example, we first usetagDetailAssign the label information tocurrentTagthe variable. Then, by accessingcurrentTag.Title/currentTag.LogoandcurrentTag.DescriptionShow the title, Logo image, and description of the tags separately.We have also added a conditional check to ensure that the image is displayed only when the Logo exists, otherwise, a backup solution is provided, which makes the page display more robust.

Summary

Anqi CMS'stagDetailTags provide powerful flexibility for website operators, allowing you to easily elevate tags from simple content categorization tools to rich content display elements. Whether creating unique tag landing pages for SEO or recommending relevant tags within articles,tagDetailCan help you present the required information in the most intuitive way.

---

Common Questions (FAQ)

1. Why is the logo image not displayed on my tag page?Firstly, please check if you have uploaded a logo image for this tag in the 'Content Management' -> 'Document Tags' section of the AnQi CMS backend.If not uploaded, the front end will not display naturally.{% if currentTag.Logo %}Such judgment logic, if the Logo field is empty,<img>Tagssrcthe property will also be empty, causing the image not to display.

I want to display the full content of a label instead of just the summary, is that okay?Of course. BesidesDescriptionfield,tagDetaillabels also support retrieving the label'sContentField. If your tag has filled in 'Tag Content' (usually supporting rich text or Markdown editing), you can{{ currentTag.Content|safe }}retrieve and display it. Please note that due toContentThe field may contain HTML code, be sure to use|safea filter to avoid the content from being escaped.

How to display the "Popular Tags" and their Logo in the sidebar, but not the tags of the current page?You need to combinetagListandtagDetailtags. First, use{% tagList hotTags with limit="5" order="views desc" %}Retrieve a list of popular tags. Then, in the loophotTagseachitemuse{% tagDetail singleHotTag with id=item.Id %}Get the detailed information of each popular tag (including Logo). This way, multiple popular tag Logos and titles can be displayed on a non-tag detail page.