Make good use of AnQiCMStagListTags, 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 the website content through the aggregation of keywords, thereby bringing better SEO performance.tagListLet us easily display the associated tags of documents, even creating eye-catching tag cloud effects.

This article will lead everyone to a deeper understandingtagListThe usage of tags, from basic association tag display to how to achieve a visually impactful tag cloud effect, making your website content organization clearer and enhancing user experience.

Core Function Analysis:tagListThe power of tags

tagListIt is a very practical tag in the AnQiCMS template system, mainly used to get the tag list related to the document or to get all the tags on the site.Its flexibility lies in the ability to be configured with different parameters to meet various label display requirements.

UsetagListThe basic syntax of tags is usually like this:{% tagList tags with limit="10" %}Here,tagsIt is the variable name we define for the tag list obtained, and 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) and the title (Title) and the link (Link) and the description (Description`) Index letter (FirstLetter`) And the category ID (CategoryId`) And other information. With this information, we can build a rich and diverse form of label display.

Display the associated tags of the document: Step-by-step implementation

The most common application scenario of tags is to display related tags at the bottom of articles or product detail pages.This can guide users to discover more related content, extending their stay on the website.

To display the associated tags on the document detail page, we need to use the corresponding template file (such asarchive/detail.htmlor a custom document detail template)tagListLabel, 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 go throughitemId=archive.Idparameters, clearly tellingtagListTags, what we want to get isarchiveThe tags associated with this document object.archive.IdIt will automatically get the unique identifier of the current document.
  • limit="10"Limited the number of displayed tags to avoid too many tags occupying the page space.
  • {% for item in tags %}Iterate through the obtained tag list. Eachitemrepresents a tag object.
  • {{ item.Link }}and{{ item.Title }}Used for generating links and display names for tags. Users can click on these links to jump to the exclusive page of the tag, where they can view more content with the same tag.
  • {% empty %}A statement is a thoughtful design that displays 'No related tags available.' when the document is not associated with any tags, thus avoiding a blank page.

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

Create a tag cloud effect: Optimize user browsing experience

Tag cloud is a visually striking presentation method, which presents tags through different font sizes, colors, or arrangements. Usually, 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 'tag weight' parameter to automatically adjust size, but we can cleverly achieve a similar tag cloud effect by obtaining all site tags and combining with front-end styles.

To create a tag cloud, we typically place it in the website's sidebar, footer, or a dedicated tag list page (such astag/index.htmlShown in the figure. The first step to implement a tag cloud is to obtain the list of tags for the entire site. At this point, we do not need to specifyitemIdthe parameters, or explicitly specifyitemIdset"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"indicatetagListGet all tags of the site, not the tags of a specific document.
  • limit="50"Limit the number of tags displayed in the tag cloud, which can be adjusted according to the page layout and requirements.
  • To simulate the effect of different sizes, we have usedforloop.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 such a combination, you can achieve a dynamic and visually appealing tag in AnQiCMS