How to display the Tag of a specific document on a non-Tag page through the `tagList` and `itemId` parameters?

As an experienced website operations expert, I know that how to flexibly display information in a content management system is crucial for improving user experience and website SEO.AnQiCMS (AnQiCMS) offers great freedom to content operators with its powerful template tag system.Today, let's delve into a very practical scenario: how to accurately display tags associated with a specific document on non-tag aggregation pages (such as article detail pages or list pages).

Perceive the value of tags: It's not just classification, but also a hub of association

In AnQiCMS, tags are not just simple categorization of content; they are also important tools for connecting different content, building internal links, and guiding users to discover relevant information.When a user browses a document, tags that appear at the bottom or sidebar and are highly relevant to its content can effectively stimulate the user's desire for exploration, enhance the website's PV (page views) and user stay time, thereby conveying positive user behavior signals to search engines.

The AnQiCMS tag feature is powerful and easy to manage.In the background, you can add one or more tags to each document and perform unified management and SEO optimization for these tags.As a rule, you will find the Tag-specific page provided by AnQiCMS (such astag/index.htmlortag/list.html) See the tag list or the document list under a specific tag. But the true art of operation lies in how to extend the value of these tags to a broader non-tag aggregated page.

Core mechanism:tagListwith the tag anditemIdThe clever combination of parameters

The template tag system of AnQiCMS is very comprehensive, among whichtagListTags are used specifically to retrieve and display a list of tags. Its basic usage is to get tags for the entire site or a specified category.However, when we need it to “recognize” and display the tags of a specific document, we need to introduce a key parameter:itemId.

ThisitemIdThe power of parameters lies in the fact that it allows you to explicitly specify which document's label to retrieve. In short,itemIdLike an accurate pointer, tellingtagListPlease show me all the tags of the document represented by this ID.

To use successfullyitemIdThe core is to obtain the unique identifier ID of the target document.In the AnQiCMS template system, obtaining the document ID is usually very intuitive.Next, we will demonstrate how to flexibly apply this mechanism through specific scenarios.

Scenario one: Display the current document tags on the document detail page.

Assuming you are building a blog post detail page, and you want to list all the tags associated with the article you are currently reading below the article title or at the end of the content. At this time, the ID of the current document can be obtained througharchiveDetailtags easily.

First, in your document detail template file (for examplearchive/detail.htmlIn a custom document template), you need to obtain the current document ID. This can be achieved by the following AnQiCMS template code:

{# 首先，在文档详情页，获取当前文档的ID #}
{% archiveDetail currentArchiveId with name="Id" %}

{# 然后，使用这个ID作为tagList的itemId参数，展示相关标签 #}
<div class="document-tags">
    <span class="tags-label">相关标签：</span>
    {% tagList tags with itemId=currentArchiveId limit="10" %}
        {% for tagItem in tags %}
            <a href="{{ tagItem.Link }}" title="{{ tagItem.Title }}" class="tag-link">{{ tagItem.Title }}</a>
        {% empty %}
            <span class="no-tags">暂无相关标签</span>
        {% endfor %}
    {% endtagList %}
</div>

In this code, we first usearchiveDetailLabel, assign the ID of the current document tocurrentArchiveIdthis variable. Then, we willcurrentArchiveIdpass totagListofitemIdParameter.limit="10"control the maximum display of 10 labels,{% empty %}Blocks elegantly handles the case where the document has no tags, ensuring that the page does not appear blank or error.Finally, each tag will be presented with its title and link, and the user can click to jump to the aggregation page of the tag.

Scenario two: Display exclusive tags for each document in the document list loop

On the category list page or home page, you may need to list the corresponding tags for each displayed document item.For example, in an article list area, several related tags are displayed below the introduction of each article.In this case, the document ID is also accessible.archiveListIn the loop, each document item itself contains its ID, namelyitem.Id.

Please see the following AnQiCMS template code example, which shows how toarchiveListdynamically load and display tags for each document in a loop:

”`twig {# Assume this is a loop of document lists, such as on a category page or home page #} {% archiveList archives with type=“page” limit=“5” %}

{% for docItem in archives %}
<div class="article-card">
    <h3><a href="{{ docItem.Link }}">{{ docItem.Title }}</a></h3>
    <p class="description">{{ docItem.Description }}</p>
    <div class="article-tags">
        <span class="tags-label">标签：</span>
        {# 为当前循环中的文档项（docItem）展示标签 #}
        {% tagList tagsForDoc with itemId=docItem.Id limit="5" %}
            {% for tag in tagsForDoc %}
                <a href="{{ tag.Link }}" class="tag-badge">{{ tag.Title }}</a>
            {% empty %}
                <span class="no-tags">无标签</span>
            {% endfor %}
        {% endtagList %}
    </div>
</div>
{% end