How to allow users to see a list of related keywords or themes at a glance while browsing an article on the website, thus guiding them to discover more content of interest, is an important aspect for improving user experience and website stickiness.AnQiCMS provides powerful template tag features, allowing you to easily display the associated Tag list dynamically in article content, both beautiful and practical.

Understanding the Tag function of Anqi CMS

In AnQi CMS, tags (Tag) are not just simple classifications of articles; they are more like a keyword index spanning different categories and content models.When you post 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 same theme across different categories, even different content models (such as articles and products).

By adding tags to articles, you can not only help users quickly locate relevant content, but also provide more rich semantic information to search engines, optimize the internal link structure of the website, thereby improving the inclusion and ranking of articles.

Core: How to obtain the associated Tag list in the article?

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

tagListThe key to tags lies initemIdParameter. When you use it on the article detail page (i.e., the page displaying a single article's content),tagListyou can use it whenitemIdSpecify the current article ID using the parameter to accurately retrieve all tags associated with the article.

each fromtagListcontains the title of the tagTitle）and link（Link）and other information, we can use this information to build clickable tag lists on the page.

Gradually implement: Display Tag list on the article detail page

Now, let's take a step-by-step look 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 operate in the template file that displays article details. In Anqi CMS, this is usually under the directory of your custom content model.detail.htmlFor example, files,article/detail.htmlorproduct/detail.html.

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

  3. Write template codeIn yourdetail.htmltemplate file, find the position where you want to display the Tag list, and then insert the following code snippet:

    Firstly, we need to ensure that we get the current article's ID. The data of the current article is usually already loaded intoarchivethe variable, where we can use it directlyarchive.IdIf for some reason,archivethe variable is not available, you can also get the current article ID explicitly througharchiveDetailthe tag. The current article ID is obtained and assigned to

    {# 假设您正在文章详情页的模板（例如 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 have obtained the current article ID and assigned it tocurrentArticleIdVariable. In the article detail page,archivethe variable usually contains all the information of the current article.
    • {% tagList articleTags with itemId=currentArticleId limit="10" %}This is the core part.tagListTags will be based onitemId(i.e., the current article ID) to query all associated tags from the database. We store the query results inarticleTagsthe variable, and thenlimit="10"limit the display to no more than 10 tags.
    • {% if articleTags %}We first judgearticleTagswhether the variable is empty, to ensure that the tag list area is rendered only when there are tags, avoiding the display of empty content.
    • {% for tag in articleTags %}If there are tags, we useforto iteratearticleTagsEach label in the array.
    • {{ tag.Link }}and{{ tag.Title }}In the loop,tag.Linkit will output the URL address of the label.tag.TitleThen it outputs the name of the label. We use<a>Label wrapping, allowing them to click and jump to the aggregation page of the label.

  4. Save and view the effect.Save your template file and then refresh the article details page, and you will see a dynamically generated list of related tags.

Optimization and Advanced

  • Limit the numberAs shown in the example,limit="N"Parameter, you can control the maximum number of display labels. This is very useful when designing page layouts to avoid the page from becoming too long due to too many labels.
  • No label processingOur code already includes:{% else %}Part, when there are no related tags in the article, a friendly prompt will be displayed instead of a blank space, improving user experience.
  • Style beautificationTo make the tag list more consistent with the visual style of your website, don't forget to add CSS styles fordiv.article-tags-section/ul.tag-listandli.tag-item aetc., such as setting background color, border, rounded corners, font size, and color.
  • SEO-friendly: Dynamically generated tag links, which are very beneficial for the internal link structure and SEO optimization of the website.It helps search engine spiders better discover relevant pages within the website, increasing the weight of page transmission.

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

Common Questions (FAQ)

Why is the tag not displayed on my article detail page?