How to display the related Tag tag list of articles or products on the AnQiCMS detail page?

How can we make users find the content they are interested in more efficiently in website operation, while also improving the visibility of the content, which is a problem we often think about.The product or article detail page, in addition to the core content, providing a list of related Tag tags is undoubtedly a good method to achieve this goal.AnQiCMS as a flexible and efficient content management system provides an intuitive and powerful Tag tag feature, allowing you to easily display these related information on the detail page.

Understand the AnQiCMS Tag label feature

On AnQiCMS backend, adding Tag tags to articles or products is very intuitive.When you edit or publish content, in the "Tag Tag" section, you can either select existing tags or enter a new tag and press Enter to add it.These tags act as index keywords for the content, not only helping you better organize and classify the content, but also providing users with another way to explore the website's content.For example, an article about "AnQiCMS deployment", you can add tags such as "AnQiCMS", "deployment", "Go language CMS", etc.After reading the article, if the user is interested in 'Go language CMS', they can click on the label directly, and the system will display all related articles or products.

Call related Tag labels list on the detail page

To be in the article or product detail page (usually{模型table}/detail.htmlThe template file shows these associated tags, AnQiCMS provides specialtagListLabel. This label is very smart, when used on the detail page, it will default to getting the ID of the current article or product asitemId, so in most cases, you do not need to manually specify this parameter.

Its basic usage is as follows:

{% tagList tags %}
    {% for item in tags %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    {% endfor %}
{% endtagList %}

Here, tagsThis is a variable name defined for the tag list, you can change it according to your preference.tagListTags will retrieve all the Tags related to the current content andforLoop to output. Inside the loop,item.Linkthe link address of Tag will be output,item.TitleThen the Tag name is output. When users click on these links, they can jump to the Tag aggregated list page, where they can see all articles or products marked with that Tag, greatly enhancing the relevance of content and users' browsing depth.

If you want to limit the number of displayed Tags, you can uselimitParameters. For example, to display up to 5 tags, you can write it like this:

{% tagList tags with limit="5" %}
    {% for item in tags %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    {% endfor %}
{% endtagList %}

This way, even if an article is associated with ten or more tags, only the first five will be displayed on the page, keeping the page concise.

Combined with practice: a complete code example.

Assuming we are editing a template for an article detail page, we hope to display related Tag tags below the article title, publication date, and other information. The following is a code snippet combined with article basic information and Tag list:

<article class="article-detail">
    {# 显示文章标题 #}
    <h1>{{ archive.Title }}</h1>

    <div class="article-meta">
        {# 显示发布日期和浏览量 #}
        <span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{{ archive.Views }}</span>

        {# 调用当前文章的所有相关Tag标签 #}
        <div class="article-tags">
            <strong>相关Tags:</strong>
            {% tagList articleTags with limit="10" %} {# 限制最多显示10个Tag #}
                {% for item in articleTags %}
                    <a href="{{ item.Link }}" class="tag-item">{{ item.Title }}</a>
                {% endfor %}
            {% endtagList %}
        </div>
    </div>

    {# 显示文章主要内容，注意使用|safe过滤器确保HTML内容正确解析 #}
    <div class="article-content">
        {{ archive.Content|safe }}
    </div>

    {# 这里可以继续添加上一篇/下一篇、相关文章推荐等内容 #}
</article>

In this example,archive.Title/archive.CreatedTime/archive.Viewsandarchive.ContentThese are the current article/product fields that are directly available in the article detail page template. We havetagListplaced the tags indivand used<strong>tags to explicitly indicate that these are “related Tags”, and then iterate over themarticleTagsVariable, generate a clickable link for each Tag.

Cautionary notes and **practice

1. The number of Tags is moderate:Avoid stacking too many tags on the detail page. Too many tags not only affect the appearance of the page but may also distract the user's attention and even be misjudged by search engines as over-optimization.It is usually recommended to have 5-10 tags per content.
2. Tag names should be concise and relevant:The name of the tag should accurately reflect the core theme of the content and be as concise and clear as possible. This is convenient for users to understand and also beneficial for SEO.
3. Regularly check and maintain the Tag:As the content of the website grows, duplicate, outdated, or irrelevant Tags may appear. Regularly cleaning and merging Tags can maintain the clarity and vitality of the website's content structure.
4. Style beautification:Ensure that the style of the Tag list is consistent with the overall design style of the website, making them look like part of the content rather than an abrupt presence.For example, add background color, rounded corners, or different font sizes to Tag links to enhance the visual effect.

By following these steps, AnQiCMS allows you to easily display the related Tag tag list on the content detail page.This not only adds effective navigation dimensions to your website content, but also greatly optimizes the user experience and the understanding of website content by search engines, thereby improving the overall operation effect of the website.

Frequently Asked Questions (FAQ)

1. How do Tag tags affect a website's SEO?The impact of tags on SEO is mainly reflected in the following aspects: first, it provides more keyword signals to search engines, helping search engines better understand the theme of the page.Secondly, each Tag page will aggregate related content, form internal links, enhance the website's link structure, and help improve the page authority.In the end, appropriately set tags can enhance user experience, increase the time users spend on the website, and indirectly send positive signals to search engines.

2. Can I limit the number of Tag tags displayed on the detail page?Of course. IntagListYou can use in the tag,limitParameters to specify the maximum number of displayed Tag count. For example,{% tagList tags with limit="5" %}Only the first 5 Tag tags associated with the current article or product will be displayed.

How do I display a list of articles under a specific Tag on non-article/product detail pages?If you want to display a specific Tag