In the surge of digital content operation, Tag Cloud (Tag Cloud) as a direct and efficient way of information aggregation has always been favored by website operators and users.It not only helps users quickly find the key content of the website, but also effectively improves the website's SEO performance, guides the spider to crawl, and increases the page PV.As an experienced website operation expert, I am well aware of the powerful and flexible tag management of AnQiCMS (AnQi CMS).tagListLabel, easily create a captivating and practical hot label cloud effect.

The charm of label cloud and the label system of AnQiCMS

Imagine, when users visit your website, they can see the topics that are most concerned about and most discussed recently at a glance, which will undoubtedly greatly enhance their browsing interest and stay time.This is the charm of the popular tag cloud.It presents the focus and popular trends of the website content through labels of different sizes, colors, or fonts, helping users quickly locate information in a vast amount.

AnQiCMS knows the importance of tags.It provides comprehensive tag management functions in content management.In the background, you can flexibly add multiple tags to each article and product. These tags are not limited by model and category and can be associated across different content types.For example, an article about 'website construction' can be tagged with 'SEO', 'user experience', 'Go language', and many other tags, greatly enriching the relevance and discoverability of the content.In addition, AnQiCMS also provides an independent tag management interface, allowing you to view, edit, and add all tags uniformly, including setting tag names, index letters, custom URLs, SEO titles, and descriptions, laying a solid foundation for the SEO optimization of tag pages.

To display these meticulously managed tags on the website frontend, AnQiCMS provides a powerful and easy-to-use template tag system, where,tagListLabel is the core tool we use to build a tag cloud.

tagListTag: the core of building a popular tag cloud.

tagListLabels are tools used specifically to obtain the tag list in AnQiCMS template language.It can extract the label data that meets your requirements from the database and display it on the web page in a loop.

Let's take a look.tagListThe basic usage of tags and the parameters it supports:

The basic structure is usually like this:

{% tagList tags with limit="10" %}
    {% for item in tags %}
        {# 在这里构建每个标签的HTML结构 #}
    {% endfor %}
{% endtagList %}

Here,tagsIs a custom variable name we use to storetagListThe tag data collection obtained by the tag.limit="10"Means we want to get up to 10 tags.

tagListThe label provides several very practical parameters to help us accurately control the acquisition of labels:

  • limit: This parameter is the key to controlling the number of tag clouds. You can specify an integer value, such aslimit="20"，to limit the maximum number of tags displayed in the tag cloud to 20. It also supportsoffsetMode, for examplelimit="2,10"This indicates starting from the 2nd label and getting 10 labels, which is very useful in some scenarios where it is necessary to skip the first few labels.
  • itemId: If you want to display specific document associated tags, you can useitemId="文档ID". But for hot tag clouds, we usually want to display the most popular tags across the entire site, so we usually do not specifyitemId, or set it toitemId="0", means not to automatically read the label of the current document ID.
  • letter: Can be accessed throughletter="A"to get labels starting with a specific letter.
  • categoryId: Allow you to get tags associated with a specific category. If you want the tag cloud to only show popular tags under a certain category, you can usecategoryId="分类ID". Multiple category IDs can be separated by commas, such ascategoryId="1,2,3".
  • siteIdIn multi-site management scenarios, it is used to specify which site's tag data to retrieve. Usually, it does not need to be filled in manually.

Pass{% for item in tags %}Loop, we can iterate through each tag data,itemThe variable provides the following fields for us to use:

  • Id: The unique ID of the label.
  • Title: The display name of the tag, which is the text seen by the user in the tag cloud.
  • Link: The link address of the tag, clicking it will jump to the aggregation page of the tag.
  • Description: The description information of the tag, usually used for SEO.
  • FirstLetter: English letter used as the first letter of the tag name, usually used for sorting the tag list alphabetically.
  • CategoryId: Category ID of the tag (if set).

How to usetagListImplementation of hot tag cloud effect.

AlthoughtagListIt does not have a direct Englishorder="hot"ororder="views desc"Parameters such as sorting automatically by popularity, but we can simulate and implement the effect of a hot tag cloud by combining the following strategies with frontend styles:

1. Get label list:First, we usetagListGet the required number of labels. Here we temporarily assume that AnQiCMS uses the default:tagListWhen there is no specific sorting in the background, it will be sorted by creation time or ID.If your AnQiCMS version or customization provides an interface for a tag list sorted by popularity, that would be a better choice.In this example, we first get 20 tags.

<div class="tag-cloud">
    {% tagList tags with limit="20" %}
        {% if tags %}
            {% for item in tags %}
                <a href="{{ item.Link }}" title="关于{{ item.Title }}的更多内容" class="tag-item">
                    {{ item.Title }}
                </a>
            {% endfor %}
        {% else %}
            <p>暂无标签。</p>
        {% endif %}
    {% endtagList %}
</div>

2. Style beautification, create a 'cloud' effect:The core of the "Tag Cloud" lies in its visual "cloudtagListreturneditemDoes not directly contain popularity data (such as, page views or related article numbers), we can simulate this difference byrandomorfixed rules.

For example, apply different styles to tags at different positions using CSS:

<style>
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 标签之间的间距 */
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 8px;
}

.tag-item {
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap; /* 防止标签内容换行 */
}

/* 模拟热门效果：通过在循环中给标签添加不同的class来实现大小和颜色差异 */
/* 实际应用中，您可能需要更复杂的JS逻辑或后端数据来分配这些class */
.tag-item:nth-child(3n+1) { /* 每3个标签一组，第1个样式 */
    font-size: 18px;
    font-weight: bold;
    color: #ff5722; /* 橙色 */
    background-color: #ffe0b2;
}
.tag-item:nth-child(3n+2) { /* 每3个标签一组，第2个样式 */
    font-size: 16px;
    color: #007bff; /* 蓝色 */
    background-color: #e0f2f7;
}
.tag-item:nth-child(3n+3) { /* 每3个标签一组，第3个样式 */
    font-size: 14px;
    color: #4CAF50; /* 绿色 */
    background-color: #c8e6c9;
}

.tag-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>

<div class="tag-cloud">
    {% tagList tags with limit="20" %}
        {% if tags %}
            {% for item in tags %}
                <a href="{{ item.Link }}" title="关于{{ item.Title }}的更多内容" class="tag-item">
                    {{ item.Title }}
                </a>
            {% endfor %}
        {% else %}
            <p>暂无标签。</p>
        {% endif %}
    {% endtagList %}
</div>

This CSS example demonstrates:nth-childSelector, giving different tags in the tag cloud a circular style, thus simulating differences in size and color visually, creating a sense of depth for the 'cloud'.In practical projects, you can define more style rules according to design requirements, or combine JavaScript to implement a more dynamic tag cloud effect.

Practical suggestions and operational optimization:

  1. Control of the number of tags: limitThe parameter is crucial.Too many tags will make the tag cloud look disorganized, and too few will lose the "cloud" effect.Generally, a range of 10-30 tags is appropriate, depending on the design and content volume of your website.
  2. Naming of tags:The label name should be concise, accurate, and highly relevant to the content. Avoid using overly broad or overly narrow vocabulary.
  3. [en] SEO Optimization:Each tag in the tag cloud should link to an independent tag aggregation page (for example/tag/SEO.html），These aggregation pages are rich in content and can effectively improve keyword rankings. AnQiCMS backend provides custom tag URL and SEO settings, be sure to make full use of them.
  4. Regular maintenance:The website content is dynamic, and the tags should be as well.Regularly check the usage frequency and effectiveness of tags, delete tags that are not often used or outdated, and add tags related to hot topics.tagListIt does not have a direct hot sorting function, but you can manually filter out hot tags based on backend data (such as article views, number of comments) and then adjust their display order or style in the tag cloud (if supported).

PasstagListTags, not only can you display tags on your website, but you can also transform these tags into attractive tools for users through careful design and operation strategies, enhancing the overall value of the website.

Common Questions and Answers (FAQ)

  1. Q:tagListHow to control the number of tags displayed in the tag cloud? Answer:You can uselimitParameters to accurately control the number of tags displayed in the tag cloud. For example, if you want to display 15 tags,tagListsetting in the labellimit="15"such as{% tagList tags with limit="15" %}...{% endtagList %}.

  2. [en] Q: What is AnQiCMS?tagListLabel whether it supports automatic sorting according to the popularity of the label (such as click-through rate or number of related articles)? Answer:According to the document description of AnQiCMS,tagListLabel currently does not have a built-in parameter directly used for 'hotness' sorting (such asorder="views desc"EnglishIt is mainly used to obtain a specified number of tags, the sorting rule may be default to ID or creation time.If you need to implement a real 'hot' tag sorting, you may need to enable the corresponding feature extension provided by AnQiCMS backend, or through custom development, perform additional popularity calculation and sorting processing before obtaining tag data.In front-end development, we mainly use CSS styles to simulate the visual effect of 'hot' tags.

  3. Q: How can I add different sizes and colors to the tags in the tag cloud to make it more of a 'cloud' effect? Answer:The visual effect of the tag cloud is mainly realized through the CSS style of the front-end.You can add different CSS classes to each tag element in the template, and then define different sizes, colors, and font weights based on these classes in the CSS file.:nth-child()Choose to apply alternating styles to tags at different positions, or combine JavaScript to dynamically assign style classes based on certain (even randomly generated) 'popularity' attributes of the tags, thereby creating a rich visual hierarchy.