How to use Tag tags to associate and display related content on the front end?

In the AnQi CMS, content organization and association are key to enhancing website value, optimizing user experience, and improving search engine performance.In addition to the traditional classification structure, we also have a very powerful and flexible tool - Tag tags.It acts as a 'living index' for the content, helping us to connect scattered content in multiple dimensions, making it easier for users to find the information they are interested in.Today, let's talk about how to fully utilize Tag tags on the front end to associate and display our wonderful content.

Tag tags: Flexible content association bridge

Imagine you have a website about "Digital Transformation of Enterprises".Under this topic, you may have "articlesIf only relying on categories, users may need to navigate through different categories to find all the information.但如果所有这些内容都打上“数字化转型”这个Tag，用户只需点击这个Tag，就能一览无余地看到所有相关内容，大大提升了信息获取效率。

Add and manage Tags for content in the background

All the wonderful front-end presentations come from the careful configuration in the background. In the Anqi CMS, adding Tag tags to content is very intuitive:

  1. Add or edit documentIn the content editing interface, you will see a field named 'Tag Label'.Here, you can directly input a new tag, press the Enter key to create and add it to the current content; you can also select from the existing tag library.This allows us to add one or more relevant tags to articles, products, etc. at any time based on their content features.
  2. Unified management of Tag tagsIf you need to manage or optimize Tags in bulk, you can go to the "Content Management" section in the backend to find the "Document Tags" feature.Here, we can modify the label name, set a custom URL (which is very important for SEO), and even add SEO titles, keywords, and descriptions to the label, so that each Tag page itself can also achieve a better search engine ranking.

Associate and display related content on the front end

When we have tagged the content, the next focus is to elegantly present these tags and their associated content to the user on the website front-end.AutoCMS provides convenient template tags, allowing us to easily implement these features.

1. Display related Tag on the content detail page

When a user reads an article or views a product, they usually want to learn more related information. On the content detail page (such as the article'sdetail.htmlTemplate) Shows all Tags of the current content, which can guide users to further explore.

We can usetagListTags to get the Tag list of the current content:

{# 假设这是文章详情页，archive.Id代表当前文章的ID #}
<div class="article-tags">
    <strong>相关标签：</strong>
    {% tagList tags with itemId=archive.Id limit="10" %}
    {% for item in tags %}
        <a href="{{item.Link}}" class="tag-link">{{item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

This code will display all the tags associated with the current article, and each tag will automatically generate a clickable link pointing to the exclusive aggregation page of the tag.

2. English Full-site Hot or Recommended Tag List

On the homepage, sidebar, or specific content list page of the website, displaying a list of popular or recommended Tags is an effective way to guide users to discover new content and enhance website stickiness.

同样使用tagList标签，但这次我们不需要指定itemId，或者明确设置itemId="0"，来获取所有标签（或根据其他参数筛选）：

{# 在首页或侧边栏模板（如index.html或partial/aside.html）中 #}
<div class="hot-tags">
    <h3>热门标签</h3>
    <ul>
    {% tagList tags with limit="20" itemId="0" %} {# itemId="0"表示获取全站所有标签 #}
    {% for item in tags %}
        <li><a href="{{item.Link}}" class="hot-tag">{{item.Title}}</a></li>
    {% endfor %}
    {% endtagList %}
    </ul>
</div>

这里我们通过limit="20"Limited the display quantity, you can adjust it according to your design requirements.

3. Build a dedicated Tag aggregation page

Tag label is one of the most core application scenarios, which is to create an independent aggregation page for each tag to display all the content marked with that tag. Anqi CMS providestag/index.htmlortag/list.htmlThis template file, as well astagDetailandtagDataListLabel.

When you click on a Tag link, the website will jump to a page like/tag/{tagId}.htmlor/tag/{tagname}.htmlThe page (the specific URL depends on your rewrite rules).In this page, we need to do two things: display the detailed information of the current Tag, and list all associated content.

  • Display Tag details:

    We can usetagDetailLabel to get the name, description and other information of the current Tag, such as intag/index.htmlortag/list.htmlthe template:

    <div class="tag-header">
    <h1>{% tagDetail with name="Title" %}</h1>
    <p>{% tagDetail with name="Description" %}</p>
    {# 还可以显示Tag的Logo等信息 #}
</div>

  • Display the list of associated documents:

    To display all the content associated with the current Tag, we will usetagDataList标签。This tag will automatically retrieve all articles or products that are tagged with the current page's Tag ID.

    {# 在tag/list.html 或 tag/index.html中 #}
<div class="tag-content-list">
    {% tagDataList archives with type="page" limit="10" %} {# type="page"表示启用分页 #}
    {% for item in archives %}
    <div class="content-item">
        <a href="{{item.Link}}">
            <h2>{{item.Title}}</h2>
            <p>{{item.Description}}</p>
            {% if item.Thumb %}
                <img src="{{item.Thumb}}" alt="{{item.Title}}">
            {% endif %}
            <span class="publish-date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </a>
    </div>
    {% empty %}
    <p>当前标签下还没有内容。</p>
    {% endfor %}
    {% endtagDataList %}


    {# 别忘了为分页内容添加分页导航 #}
    <div class="pagination-area">
        {% pagination pages with show="5" %}
            {# 这里放置分页链接的HTML代码，例如： #}
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for p in pages.Pages %}<a class="{% if p.IsCurrent %}active{% endif %}" href="{{p.Link}}">{{p.Name}}</a>{% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        {% endpagination %}
    </div>
</div>

    tagDataListThe label is very intelligent, it will automatically read the current Tag page's Tag ID to obtain data, so you usually do not need to specify manuallytagIdthe parameters.type="page"andlimitParameters, we can conveniently control the number of items displayed per page, and cooperate withpaginationgenerate beautiful pagination navigation.

The operation value of Tag tags

Effectively utilize the Tag tag not only beautifies the website structure, but also brings real operating benefits:

  • Enhance user experience：Users can discover interesting content in a more intuitive and flexible way, reducing search costs and improving the usability of the website.
  • Optimize SEOEach Tag tab is an aggregation page that can effectively increase the number and depth of internal links on a website, providing more crawling paths for search engines.At the same time, if the Tag name is a long-tail keyword that users frequently search for, these Tag pages can be better indexed and ranked by search engines, attracting more targeted traffic.
  • Rich content dimensionsEnglish provides a new way of content tag