Managing and displaying content in AnQiCMS, the Tag feature is a very practical function.It can not only help you better organize article content, but also provide users with more flexible navigation methods, and is very beneficial for search engine optimization (SEO).When readers browse an article, if they can see a list of related tags and click on these tags to discover more similar content, it will undoubtedly greatly enhance the user experience and the website's PV (Page Views).

Today, let's delve into how to make use of AnQiCMS.tagListTags, easily display a list of tags related to the current article and their links on the article page.

The value of the label and the label management of AnQiCMS

In AnQiCMS, you can find the 'Document Tags' feature under the 'Content Management' module in the backend.When publishing or editing an article, the system provides an intuitive interface to add multiple tags to the article.These tags can be keywords, topics, or any words you think can summarize the content of the article.

AnQiCMS's tag management design is very flexible, the same tag can be associated with articles under different content models.Each tag can have an independent name, index letter, custom URL, and SEO description, making the tag itself an important part of the website's content system, which can be better indexed and understood by search engines.

IntroductiontagListLabel: The core of article label display

To display a list of tags associated with the current article on the article page, we mainly use the built-in tags of AnQiCMS.tagListThis tag is specifically used to retrieve and display the tag information of the document.

tagListTags usually appear in pairs, formatted as follows:

{% tagList 变量名 with 参数 %}
    {# 循环处理标签数据的代码 #}
{% endtagList %}

Among them,变量名This is a temporary variable name you define for the tag list you have obtained, for examplearticleTags. Inside the tag, you can useforTranslate the following JSON array by translating the content of the 'value' field, and return the result while strictly maintaining the original JSON array format. Translate the following JSON content into 【en】:"循环来遍历这个变量，从而逐一展示每个标签的详细信息。

Practical demonstration: Display the tag list on the article detail page

Assuming you want to display all associated tags at the bottom of each article, and allow these tags to be clickable, jumping to the special page of the tag topic, in the AnQiCMS article detail template (usually the template used for article details){模型table}/detail.htmlIn the parenthesis, you can write code like this:

{# 在文章详情页（例如：archive/detail.html）的合适位置 #}
<div class="article-tags-section">
    <strong>相关标签：</strong>
    {% tagList currentArticleTags %} {# 默认会自动获取当前文档的ID来显示相关标签 #}
        {% for item in currentArticleTags %}
            <a href="{{ item.Link }}" 
               class="tag-link" 
               title="查看更多关于 {{ item.Title }} 的内容">{{ item.Title }}</a>{% if not forloop.Last %}, {% endif %}
        {% empty %}
            <span>暂无相关标签。</span>
        {% endfor %}
    {% endtagList %}
</div>

In this code block:

  • {% tagList currentArticleTags %}We define a variable namedcurrentArticleTagsto store the obtained list of tags. When not specifieditemIdwhentagListThe system will intelligently retrieve the current page article ID and display all associated tags.
  • {% for item in currentArticleTags %}: Iterate overcurrentArticleTagsArray,itemThe variable represents a specific tag object in each loop.
  • {{ item.Link }}This is the link address of the tag. Clicking it will direct the user to the aggregation page of the tag, displaying all articles with this tag.
  • {{ item.Title }}This is the display name of the tag.
  • {% if not forloop.Last %}, {% endif %}This is a little trick used to add a comma after each tag name, except for the last one, to make the display more natural.
  • {% empty %} ... {% endfor %}If the current article is not associated with any tags, this part of the content will be displayed, prompting the user with 'No related tags available.', to avoid leaving the page blank.

Flexible Application: ExploretagListof more parameters

tagListThe tags also provide some parameters that allow you to control the display of tags more precisely.

  1. itemId: Specify or get the site-wide tags

    • Default behavior (without)itemId)As shown in the above example, on the article detail page, it automatically retrieves the tags of the current article.
    • Specify article IDIf you want to display tags for a specific ID article instead of the current page, you can use it like this:
      
{# 显示ID为123的文章的所有标签 #}
{% tagList specificArticleTags with itemId="123" %}
    {% for item in specificArticleTags %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    {% endfor %}
{% endtagList %}
    • Get all tags on the siteIf you want to display all site tags in the sidebar, footer, or an independent tab (for exampletag/index.htmlyou can setitemId="0".
      
{# 在侧边栏或页脚显示全站热门标签 #}
<div class="site-tag-cloud">
    <h3>热门标签</h3>
    {% tagList allSiteTags with itemId="0" limit="30" %} {# itemId="0" 表示获取所有标签，不与当前文章关联 #}
        {% for item in allSiteTags %}
            <a href="{{ item.Link }}">{{ item.Title }}</a>
        {% endfor %}
    {% endtagList %}
</div>

  2. limit: Control the display quantity.This parameter can limit the number of displayed tags. For example, if you only want to display the top 10 tags, you can do it like this:

    {# 显示当前文章的前5个标签 #}
{% tagList limitedTags with limit="5" %}
    {% for item in limitedTags %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    {% endfor %}
{% endtagList %}

    limitIt also supportsoffsetMode, for examplelimit="2,10"Represents the second