How to use template tags to dynamically display the associated Tag list in article content?

How to let users see the list of related keywords or themes when browsing an article on a website, so that they can discover more interesting content and it is an important factor to improve user experience and website stickiness.AnQiCMS provides powerful template tag features, allowing you to easily display related Tag lists in article content, both beautiful and practical.

Understanding Anqi CMS Tag Functionality

In AnQi CMS, tags (Tag) are not just a simple classification of articles, but more like a keyword index spanning different categories and content models.When you publish articles in the background, you can add multiple tags to the articles.These tags are independent of the classification system, and can cleverly connect articles related to the theme across different categories, even different content models (such as articles and products).

By adding tags to the article, you can not only help users quickly locate relevant content, but also provide search engines with richer semantic information, optimize the internal link structure of the website, and thus improve the inclusion and ranking of the article.

Core: How to get the associated Tag list in an article?

To dynamically display the associated Tag list in the article content, we need to use Anqi CMS'stagListTemplate tag. This tag is specifically used to obtain the tag data associated with a specified article.

tagListThe key to the tag lies initemIdParameter. When you use it on the article detail page (i.e., the page that displays the content of a single article)tagListyou can go throughitemIdParameters to specify the current article ID, thus accurately retrieving all tags associated with the article.

Each fromtagListThe tag objects obtained from it, all contain the title of the tag (Title) and the links(LinkWe can use this information to build a clickable tag list on the page.

Gradually implement: Display the Tag list on the article detail page.

Now, let's look step by step at how to implement this feature in the template file of the article detail page.

1. Are you sure you want to modify the template file?Generally, we need to perform operations in the template file displaying article details. In AnQi CMS, this is usually under the custom content model directory you have created.detail.htmla file, for examplearticle/detail.htmlorproduct/detail.html.

2. Locate the insertion positionYou can choose to place the Tag list at the bottom of the article content, as a 'related reading' or 'keywords' area, or in the sidebar, depending on the overall layout and user habits of your website.

3. Write template codeBefore yourdetail.htmlIn the template file, find the location where you want to display the Tag list, and then insert the following code snippet:

   Firstly, we need to ensure that we get the ID of the current article. The data of the current article is usually loaded in the article detail page.archiveWe can use the variable directly.archive.Id. If for some reason,archivethe variable is not available, you can also get the current article ID througharchiveDetailan explicit tag to get the current article ID.

   {# 假设您正在文章详情页的模板（例如 article/detail.html 或 product/detail.html）中操作 #}
   {# 确保获取到当前文章的ID。在详情页，archive.Id 通常是可用的。 #}
   {# 如果不确定，也可以显式获取：{% archiveDetail currentArticleId with name="Id" %}{% set currentId = currentArticleId %}{% endarchiveDetail %} #}
   {# 或者更简洁地直接使用 archive.Id #}
   {% set currentArticleId = archive.Id %} 
   
   {# 使用 tagList 标签获取与当前文章关联的Tag列表 #}
   {# itemId 参数指向当前文章的ID，limit="10" 限制最多显示10个标签 #}
   {% tagList articleTags with itemId=currentArticleId limit="10" %}
   
   {# 判断是否有标签需要显示 #}
   {% if articleTags %}
   <div class="article-tags-section">
       <span class="section-title">相关标签：</span>
       <ul class="tag-list">
       {% for tag in articleTags %}
           <li class="tag-item">
               <a href="{{ tag.Link }}" title="查看更多关于{{ tag.Title }}的文章">
                   {{ tag.Title }}
               </a>
           </li>
       {% endfor %}
       </ul>
   </div>
   {% else %}
   {# 如果当前文章没有关联任何标签，可以显示一个提示信息 #}
   <div class="no-tags-found">
       本文暂无相关标签。
   </div>
   {% endif %}
   
   {% endtagList %}
   

   In this code block:

   • {% set currentArticleId = archive.Id %}: We got the current article ID and assigned it tocurrentArticleIdVariable. On the article detail page,archiveVariables usually contain all the information of the current article.
   • {% tagList articleTags with itemId=currentArticleId limit="10" %}: This is the core part.tagListThe label will be based onitemId(i.e., the current article ID) query all tags associated with it from the database. We will store the query results inarticleTagsthe variable, and uselimit="10"to limit the maximum number of tags displayed to 10.
   • {% if articleTags %}: We first judgearticleTagsWhether the variable is empty, ensure that the tag list area is rendered only when there are tags, to avoid displaying empty content.
   • {% for tag in articleTags %}: If there are tags, we useforLoop througharticleTagsEach label in the array.
   • {{ tag.Link }}and{{ tag.Title }}: inside the loop,tag.LinkIt will output the URL address of the label,tag.TitleThen output the name of the label. We use<a>tags to wrap them, so they can be clicked to jump to the aggregation page of the tag.

4. Save and view the effectSave your template file, refresh the article detail page, and you will see a dynamically generated list of associated tags.

Optimization and Advanced

• Limit the number: As shown in the example, throughlimit="N"Parameters, you can control the maximum number of tags displayed. This is very useful when designing page layouts, as it can prevent the page from becoming lengthy due to too many tags.
• No tag processingWe have already included in our code{% else %}Part, when the article does not have related tags, it will display a friendly prompt instead of a blank page, improving the user experience.
• Style beautification: Make sure to add CSS styles to elements such as setting background color, border, rounded corners, font size, and color to make the tag list more consistent with the visual style of your website.div.article-tags-section/ul.tag-listandli.tag-item aetc., for example setting background color, border, rounded corners, font size, and color.
• SEO-friendly: Tags generated dynamically, which are very beneficial for the internal link structure of the website and SEO optimization.It can help search engine spiders better discover relevant pages within the website, increasing the page authority transfer.

By following these steps, you can dynamically display the associated Tag list in the article content of AnQi CMS efficiently and flexibly.

Frequently Asked Questions (FAQ)

Why does my article detail page, label