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

As an experienced website operations expert, I am well aware that how to flexibly display information is crucial for improving user experience and website SEO in a content management system.AnQiCMS (AnQiCMS) provides 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-label aggregation pages (such as article detail pages or list pages).

Understand the value of tags: more than classification, it is also the hub of association

In AnQiCMS, tags (Tag) are not just a simple categorization of content; they are also an important tool 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 to explore, enhance the website's PV (Page Views) and user stay time, thereby conveying positive user behavior signals to search engines.

The tag feature of AnQiCMS 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.tag/index.htmlortag/list.htmlSee the list of tags or the document list under a specific tag. But the real art of operation lies in how to extend the value of these tags to a broader non-tag aggregated page.

Core Mechanism:tagListTags anditemIdThe clever combination of parameters

The template tag system of AnQiCMS is very comprehensive, wheretagListTags are specifically used to retrieve and display the tag list.The basic usage is to get tags for the entire site or a specified category.itemId.

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

To successfully useitemIdThe core lies in obtaining 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 use this mechanism through specific scenarios.

Scenario one: Display the current document's tags on the document details page

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

Firstly, in your document detail template file (for examplearchive/detail.htmlIn the custom document template) you need to get the current document's ID. This can be achieved with 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 current document's ID tocurrentArchiveIdthis variable. Subsequently,currentArchiveIdPass totagListofitemIdParameter.limit="10"it controls the maximum display of 10 labels,{% empty %}The block gracefully handles the case where the document has no tags, ensuring that the page does not appear blank or report an error.Finally, each tag will be presented with its title and link, and users can click to jump to the aggregation page of the tag.

Scene 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, under the summary of each article in a list of articles, several related tags are displayed.In this case, the document ID is also accessible.archiveListIn the loop, each document item itself contains its ID,item.Id.

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

【en】A loop for document lists, such as on category pages or the homepage. {% 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