How to display the associated tags of the `tagList` and implement a tag cloud effect?

How to make good use of AnQiCMS'stagListTag, easily realize document association and tag cloud display

In website content operation, tags (Tag) play a crucial role.They can not only help users find the content they are interested in quickly, improve the convenience of site navigation, but also optimize the search engine's understanding of website content through the aggregation of keywords, thus bringing better SEO performance.AnQiCMS has fully considered this requirement, built-in powerful tag features, and provided flexible template tagstagListLet us easily display the associated tags of the document, even creating an eye-catching tag cloud effect.

This article will lead everyone to understand in depthtagListHow to use tags, from basic related tag display to how to achieve a visually stunning tag cloud effect, making your website content organization clearer and improving the user experience to a new level.

Core function analysis:tagListThe power of tags

tagListIs a very practical tag in the AnQiCMS template system, it is mainly used to get the tag list related to the document, or to get all the tags of the site.Its flexibility lies in being able to configure different parameters to meet the needs of various label displays.

UsetagListThe basic syntax of tags is usually like this:{% tagList tags with limit="10" %}Here, tagsIs the variable name we define for the list of tags obtained, you can name it according to your preference.limit="10"This indicates that we want to retrieve up to 10 tags.

This tag can retrieve the ID of each tag (Id), Title (Title) and link (Link), Description (Description), the index letter (FirstLetter) and the ID of the category it belongs to (CategoryIdThis information and more. Through this information, we can build various label display forms.

Show the associated tags of the document: step by step implementation.

The most common application scenario for tags is at the bottom of articles or product detail pages, displaying tags related to the current content.This can guide users to discover more related content and extend the time they stay on the website.

We need to display related tags on the document detail page, we need to use the corresponding template file (such asarchive/detail.htmlor a custom document detail template)tagListtags and specify the ID of the current document.

For example, you can write the code like this in your document detail template:

{# 假设当前页面是文档详情页，archive 是文档详情对象 #}
<div class="article-tags">
    <strong>相关标签：</strong>
    {% tagList tags with itemId=archive.Id limit="10" %}
        {% for item in tags %}
            <a href="{{ item.Link }}" title="{{ item.Title }}" class="tag-item">{{ item.Title }}</a>
        {% empty %}
            <span>暂无相关标签。</span>
        {% endfor %}
    {% endtagList %}
</div>

In this code block:

• We passitemId=archive.IdParameters, explicitly telltagListTags, what we want to get isarchivethe tags associated with this document object.archive.IdIt will automatically retrieve the unique identifier of the current document.
• limit="10"The number of displayed tags is limited to avoid too many tags occupying the page space.
• {% for item in tags %}Loop through the obtained tag list. EachitemRepresent a label object.
• {{ item.Link }}and{{ item.Title }}Links and display names used to generate tags. When users click these links, they can jump to the exclusive page of the tag, where they can view more content with the same tag.
• {% empty %}The statement is a thoughtful design, when the document is not associated with any tags, it will display "No related tags." to avoid blank pages.

By the above code, your document detail page can clearly display the tags closely related to the current document, greatly enhancing the user's content discovery experience.

Create a tag cloud effect: optimize user browsing experience

Label clouds are a visually striking way of displaying tags, presenting them through different font sizes, colors, or arrangements. Typically, the more popular a tag (or the more associated documents it has), the more prominent it appears in the cloud. Although AnQiCMS'stagListThe tag itself does not directly provide a parameter like "tag weight" to automatically adjust size, but we can cleverly achieve a similar tag cloud effect by getting all-site tags and combining them with frontend styles.

To create a tag cloud, we usually place it in the website sidebar, footer, or a dedicated tag list page (for exampletag/index.html) is displayed. The first step in implementing a tag cloud is to obtain the list of tags for the entire site. At this point, we do not need to specifyitemIdparameters, or explicitly specifyitemIdis set to"0".

The following is a simple tag cloud code example:

<div class="tag-cloud-container">
    {% tagList allTags with itemId="0" limit="50" %} {# 获取全站最多50个标签 #}
        {% for item in allTags %}
            <a href="{{ item.Link }}" title="包含 {{ item.Title }} 的文档" class="tag-cloud-item tag-size-{{ forloop.Counter % 5 + 1 }}">
                {{ item.Title }}
            </a>
        {% endfor %}
    {% endtagList %}
</div>

In this example:

• itemId="0"indicationstagListThe tags obtained are all site tags, not tags of specific documents.
• limit="50"The number of tags displayed in the tag cloud is limited, which can be adjusted according to the page layout and requirements.
• To simulate different sizes, we utilizedforloop.Counter(the current loop index, starting from 1) to generate a simple style classtag-size-X. You can use CSS totag-size-1totag-size-5Define different font sizes, colors, or boldness to create visual differentiation. For example:

/* 示例 CSS 样式，实际项目中请根据需要调整 */
.tag-cloud-item {
    display: inline-block;
    margin: 5px;
    padding: 3px 8px;
    border-radius: 3px;
    text-decoration: none;
    color: #555;
    background-color: #f0f0f0;
    transition: all 0.3s ease;
}
.tag-cloud-item:hover {
    background-color: #e0e0e0;
    color: #333;
}
.tag-size-1 { font-size: 14px; }
.tag-size-2 { font-size: 16px; font-weight: bold; }
.tag-size-3 { font-size: 18px; color: #007bff; }
.tag-size-4 { font-size: 20px; font-weight: bold; color: #28a745; }
.tag-size-5 { font-size: 22px; font-weight: bolder; color: #dc3545; }

By combining this, you can achieve a dynamic and visually appealing tag in AnQiCMS