How to get 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 need not only to list tags, but also to be able to display detailed information about a single tag on an independent page or in a specific area, such as its title, description, or even a representative Logo.AnQi CMS provides a simple and efficient method to meet this requirement.

Understand the source of tag information

In the AnQi CMS backend, you can configure the details for each tag.Enter the "Content Management" under the "Document Tag" module, and you will find that each tag not only has a "Tag Name" but also can fill in the "Tag Description" (Description), "SEO Title", "Tag Keywords", and even upload a "Logo" image.This information maintained in the background is what we can obtain and display in the front-end template.

UsetagDetailRetrieve details of a single Tag

AnQi CMS provides special template tagstagDetailTo get detailed data for a single tag. This tag is designed to be very flexible, it can be on the tag detail page (such astag/detail.htmlortag/list.htmlIn such a template, the system will automatically identify the tag ID of the current page, and you can also obtain information about a specific tag 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 on the current page. For example, if you visitexample.com/tag/seothentagDetailit will default to fetching all information for the tag 'SEO'.

{# 在标签详情页，系统会自动识别当前标签 #}
{% 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 %}

We used here{% tagDetail tagInfo %}Assign the details of the current tag to a variable namedtagInfo, and then call its properties through 等方式tagInfo.Title/tagInfo.Logo/tagInfo.Description. To retrieve the details of a specified Tag, use

.

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

Suppose you want to retrieve the tag with ID.5The detailed information of the tag is as follows:

{# 获取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 tag (tokenSpecify the label, which is usually 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 of displaying title, description, and Logo

Now, let's combine them to 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 tocurrentTaga variable. Then, by accessingcurrentTag.Title/currentTag.LogoandcurrentTag.DescriptionDisplay the title, logo image, and description of the tag separately.We have added a conditional judgment 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

Of Security CMStagDetailTags provide website operators with powerful flexibility, allowing you to easily transform tags from simple content classification tools into richly displayed page elements. Whether it's creating unique tag landing pages for SEO or recommending related tags in articles,tagDetailCan help you present the required information in the most intuitive way.

Frequently Asked Questions (FAQ)

1. Why is the Logo image not displayed on my tag page?First, please check if you have uploaded a Logo image for this tag in the 'Content Management' -> 'Document Tag' section of the Anqi CMS backend.If not uploaded, the front-end will not display naturally. Next, please confirm whether your template code includes{% if currentTag.Logo %}This judgment logic, if the Logo field is empty,<img>label'ssrcthe property will also be empty, causing the image not to display.

2. Can I display the full content of a label instead of just a brief introduction, can I?Of course. In addition toDescription.tagDetaillabels also support getting the label'sContentfield. If you have filled in 'Label Content' in the background (usually supporting rich text or Markdown editing), you can use{{ currentTag.Content|safe }}to retrieve and display. Please note that due toContentThe field may contain HTML code, be sure to use|safefilter to prevent content from being escaped.

3. How to display the "Hot 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" %}Get the list of popular tags. Then, in the loophotTagseachitemin, and then use{% tagDetail singleHotTag with id=item.Id %}Get detailed information about each popular tag (including Logo). This allows multiple popular tags' Logo and title to be displayed on a non-tag detail page.