How to use the AnQiCMS `tagList` tag to display a list of related tags and their links with the article?

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

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

The value of the tag and AnQiCMS tag management

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

The tag management design of AnQiCMS 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.

IntroductiontagListTag: The core of article tag display

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

tagListTags usually appear in pairs, formatted as follows:

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

Among them,变量名Is the temporary variable name you define for the tag list obtained, for examplearticleTags. Inside the tag, you can useforLoop to iterate over this variable to display the details of each tag one by one.

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

Suppose you want to display all the tags associated with each article at the bottom of the article, and make these tags clickable so that they can jump to the topic page of the tag. In the AnQiCMS article detail template, it is usually{模型table}/detail.htmlYou can write code like this in Chinese:

{# 在文章详情页（例如：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 namedcurrentArticleTagsVariable to store the tag list obtained. When unspecifieditemIdparameters,tagListIt will intelligently get the ID of the current page article and display all associated tags.
• {% for item in currentArticleTags %}：TraversecurrentArticleTagsarray,itemThe variable represents a specific label object in each loop.
• {{ item.Link }}This is the link address of the tag. Clicking it will lead 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, but not the last one, making 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 'No related tags.' to avoid leaving the page blank.

Flexible Application: ExploretagListAdditional parameters

tagListThe tag also provides some parameters that allow you to finely control the display of the tag.

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

   • Default behavior (without)itemId)As shown in the example above, on the article detail page, it will automatically retrieve 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 site tagsIf you want to display all tags in the sidebar, footer, or independent tabs (such astag/index.html) you 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. limitControl the number of displayed items.This parameter can limit the number of tags displayed. 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 supportsoffsetpatterns, such aslimit="2,10"It indicates the second one.