How to display all used Tag tags on the website or only display Tag tags related to the current article in AnQiCMS?

When building website content, tags play an important role. They can not only help you better organize information and improve the discoverability of content, but also optimize the user experience, making it easier for visitors to find content of interest.For a content management system, flexibly displaying and managing these tags is one of its core values.AnQiCMS provides powerful functions in this aspect, allowing you to easily control the display of tags on the website according to your actual needs.

Add and manage Tag tags

On the AnQiCMS backend, adding tags to articles or products is a straightforward process.When you edit or publish a document, you can find the "Tag" field in the "Other Parameters" collapse box.You can select an existing label or directly enter a new label name, then press Enter to convert it into a new label.You can add multiple tags to each article, and these tags are not limited to specific categories or content models. This means that the same tag can be associated with different types of content (for example, an article and a product can both have a "New Release" tag), which greatly increases the flexibility of content association.

You can also access the "Document Tags" feature under "Content Management" to centrally view and manage all tags, including modifying tag names, adding descriptions, or setting custom URLs.This centralized management approach ensures the tidiness and consistency of the tag library.

Display all Tag labels on the website

Sometimes, you may wish to display all the tags used in a certain area of the website, such as the sidebar or a dedicated tag cloud page, to enhance the website's navigation and content aggregation. AnQiCMS provides a very practicaltagListTemplate tags can easily meet this requirement.

When you usetagListlabel and specifyitemId="0"At that time, it will retrieve all Tag tags on the website. CombinedlimitParameters, you can control the number of tags displayed, for example, only display the most commonly used 50 tags. By using a simple loop, you can display these tags and their links on the page.

For example, in your template file (such astag/index.htmlOr in the public sidebar template), you can call it like this:

<div class="tag-cloud">
    <h3>热门标签</h3>
    {% tagList allTags with itemId="0" limit="50" %}
        {% for item in allTags %}
            <a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}}</a>
        {% empty %}
            <span>暂无标签</span>
        {% endfor %}
    {% endtagList %}
</div>

This code will retrieve all the tags used on your website and display them as links, allowing visitors to clearly see the hot topics covered by the website.

Display tags related to the current article

And in the specific article or product detail page, we usually prefer to see tags that are only related to the current content. AnQiCMS also passes through.tagListThe tag provides a concise and efficient implementation method.

In the template of the article detail page (for example)archive/detail.html)tagListThe tag will intelligently identify the ID of the current article. You do not need to pass it manually.itemIdParameter, it will default to retrieving and displaying all tags associated with the current article. If you need to limit the number, you can also continue to use it.limitParameter.

In the article detail page, you can lay out the related tags in this way:

<div class="article-tags">
    <span>标签：</span>
    {% tagList relatedTags limit="10" %} {# 在文章详情页默认会自动关联当前文章ID #}
        {% for item in relatedTags %}
            <a href="{{item.Link}}" class="tag-link">{{item.Title}}</a>
        {% empty %}
            <span>本文暂无标签</span>
        {% endfor %}
    {% endtagList %}
</div>

In this way, when users read an article about 'Go Language Development', they can directly see related tags such as 'Go Language', 'Backend Development', 'Microservices', etc., which makes it convenient for them to explore related content further.

Label detail page content organization

When a user clicks on a label, they will be directed to a dedicated label detail page, usually corresponding to the template file istag/list.html. On this page, AnQiCMS providestagDetailandtagDataListtwo tags to help you build content.

First, you can usetagDetailTo get the detailed information of the current tag, such as the title and description:

<h1>标签：{% tagDetail with name="Title" %}</h1>
<p>{% tagDetail with name="Description" %}</p>

Next, to list all related articles under the tag, you need to usetagDataListLabel. This label will automatically filter out all documents marked with the current page's label ID. At the same time, it supportstype="page"parameters, allowing you to combinepaginationLabel, add pagination functionality to the article list under the label, so that it can be displayed well even if there is a large amount of content under the label.

A tag detail page article list part will generally be like this:

<div class="tag-articles">
    {% tagDataList archives with type="page" limit="10" %}
        {% for item in archives %}
            <article class="article-item">
                <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
                <p>{{item.Description|truncatechars:150}}</p>
                <div class="article-meta">
                    <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span>浏览量：{{item.Views}}</span>
                </div>
            </article>
        {% empty %}
            <p>该标签下暂无相关文章。</p>
        {% endfor %}
    {% endtagDataList %}

    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            {# 这里是分页导航的具体实现代码，您可以根据pagination标签文档进行配置 #}
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for pageItem in pages.Pages %}<a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>{% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        {% endpagination %}
    </div>
</div>

By using a combination of these tags, AnQiCMS makes the tag feature on the website both flexible and powerful, whether it is a comprehensive tag display or a refined content association, it can be well supported.

Some practical suggestions

To fully utilize the value of the tags, here are some suggestions:

• Maintain relevanceEach tag should be highly relevant to the content of the article, avoiding overly broad or imprecise words.
• Control quantityEach article should not have too many tags, usually 3-5 core tags are enough to keep it concise and help improve the focus of the tags.
• Unified specificationIn backend management, try to use a unified label format to avoid fragmentation caused by synonyms or inconsistent capitalization.For example, "SEO optimization" and "seo optimization" should be unified into a single tag.
• Leverage SEO advantages: The tag page itself is a content aggregation page, appropriate tag descriptions and titles help search engines understand the theme and improve inclusion and ranking.

AnQiCMS provides high flexibility and practicality in tag management and display, helping you optimize the website structure, enhance user experience, and ultimately support your content marketing and SEO strategies.

Frequently Asked Questions (FAQ)

Q1: Can I display all tags on the website in different sizes based on their usage frequency (i.e., tag cloud effect)?

A1: