When building website content, tags (Tag) play an important role. They 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 features in this aspect, allowing you to easily control the display of tags on the website according to your actual needs.

Add and manage tags

You can also view and manage all tags, including modifying tag names, adding descriptions, or setting custom URLs, under the 'Content Management' section.This centralized management approach ensures the tidiness and consistency of the tag library.

Display all Tag tags on the website

Sometimes, you may want to display all the used tags in a specific 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, which can easily meet this requirement.

When you usetagLista tag to specifyitemId="0"When, it will get all the Tag tags on the website. CombinedlimitParameters, you can control the number of displayed tags, for example, only show the top 50 most frequently used tags. Through a simple loop, you can display these tags and their links on the page.

For example, in your template file (such astag/index.htmlor common sidebar templates), 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 easily see the hot topics covered by the website.

Display the Tag tags related to the current article

And in specific articles or product detail pages, we usually prefer to see tags that are only related to the current content. AnQiCMS also usestagListTags, providing a concise and efficient implementation method.

In the template of the article detail page (for example)archive/detail.html)tagListTags will intelligently recognize the current article's ID. You do not need to manually passitemIdParameters, it will default to retrieve and display all tags directly associated with the current article. If you need to limit the number, you can also continue to uselimitParameter.

In the article detail page, you can arrange related tags like this:

<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>

When a user reads an article about 'Go Language Development', they can directly see related tags such as 'Go Language', 'Backend Development', and 'Microservices', making 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 a template filetag/list.htmlOn this page, AnQiCMS providestagDetailandtagDataListtwo tags to help you build content.

Firstly, you can usetagDetailTo get detailed information about the current tag, such as the title and description, use the tag to retrieve:

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

To list all related articles under the tag, you need to use:tagDataListTags. This tag will automatically filter out all documents marked with the current page's tag ID. It also supportstype="page"parameters, allowing you to combinepaginationTags, add pagination functionality to the article list under the tag, so that it can be displayed well even if there is a large amount of content under a certain tag.

An article list section of a tag detail page would generally look 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>

Through the combination of these tags, AnQiCMS makes the tag feature on the website both flexible and powerful. Whether it's comprehensive tag display or refined content association, it can be well supported.

Some practical suggestions

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

  • Maintain relevanceEach tag should be highly relevant to the article content, avoiding overly broad or imprecise words.
  • Control the quantityThe number of tags for each article should not be too many, usually 3-5 core tags are enough, keeping it concise helps to enhance the focus of the tags.
  • Unified normsIn the background management, try to use a unified label format to avoid fragmentation due to synonyms or inconsistent capitalization.For example, 'SEO optimization' and 'seo optimization' should be unified as a single tag.
  • Leverage the SEO advantageThe tag page itself is an aggregation page of content. Appropriate tag descriptions and titles help search engines understand the theme, improving inclusion and ranking.

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

Common Questions and Answers (FAQ)

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

A1: