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

In 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 tag.It acts like a 'living index' for the content, helping us to link 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 the Tag tag on the front end to associate and display our wonderful content.

Tag tags: Flexible content association bridge

Different from the strict classification system, Tag tags are more like keywords or thematic words of the content.In AnQi CMS, the advantage of Tag tags lies in their high flexibility and cross-model association capabilities.This means that, regardless of what you post, whether it's an article, product, or other custom content model, as long as they have common characteristics or themes, you can tag them with the same Tag.Such that, the content originally scattered across different categories or models can be gathered together through Tag labels to form a unique content collection.

Imagine you have a website about "corporate digital transformation".Under this topic, you may have various forms of content such as 'articles' discussing trends, 'products' recommending specific solutions, and even relevant 'industry cases'.If only rely on categories, users may need to navigate between different categories to find all the information.But if all this content is tagged with 'Digital Transformation', users can simply click on this tag and see all related content at a glance, greatly improving the efficiency of information acquisition.

Add and manage tags for content in the background

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

  1. Add or edit documentsIn the content editing interface, you will see a field named "Tag label".Here, you can directly enter a new tag, press Enter to create and add it to the current content;You can also select from the existing tag library. This way, we can add one or more related tags to articles, products, etc. at any time.
  2. Unified management of Tag tagsIf you need to manage or optimize Tags in bulk, you can go to the "Content Management" backend to find the "Document Tag" feature.Here, we can change 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 achieve better search engine rankings.

Associate and display related content on the front end

After we label the content, the focus then shifts to elegantly presenting the labels and their associated content on the website front-end.AnQi CMS provides convenient template tags, allowing us to easily implement these features.

1. Display related Tag in the content detail page

When a user reads a specific article or views a product, they usually want to learn more related information. On the content detail page (such as the article'sdetail.htmlTemplate) Display 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 to the exclusive aggregation page of the tag.

2. The popular or recommended Tag list across the entire site

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.

Use in the same waytagListTags, but this time we don't need to specifyitemIdor explicitly setitemId="0"To get all tags (or filter by other parameters):

{# 在首页或侧边栏模板（如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>

Here we go throughlimit="20"Limited the number of displayed items, you can adjust according to your design needs.

3. Build Tag Exclusive Aggregate Page

One of the most core application scenarios of Tag labels is to create an independent aggregation page for each label, displaying all the content tagged with it. Anqi CMS provides this feature.tag/index.htmlortag/list.htmlsuch template file, as welltagDetailandtagDataList.

the website will jump to the form like when you click a Tag link/tag/{tagId}.htmlor/tag/{tagname}.htmlThe page (the specific URL depends on your pseudo-static rules).On this page, we need to do two things: display the details of the current Tag, as well as list all related content.

  • show Tag details:

    We can usetagDetailUse a tag to get the name, description, and other information of the current Tag, for example intag/index.htmlortag/list.htmlin the template:

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

  • Display the list of related documents:

    To display all the contents associated with the current Tag, we will usetagDataListThe tag will automatically retrieve all articles or products content 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 tag is very intelligent, it will automatically read the current Tag page's Tag ID to retrieve data, so you usually do not need to specify manuallytagIdthe parameter. At the same time,type="page"andlimitParameters, we can conveniently control the number of items displayed per page and cooperate withpaginationtags to generate beautiful pagination navigation.

The operational value of Tag tags

Utilize Tag tags properly, not only can they beautify the website structure, but also bring tangible operational benefits:

  • Enhancing user experienceUsers can discover interesting content in a more intuitive and flexible way, reducing search costs and improving the ease of use of the website.
  • Optimize SEOEach Tag tab is a content aggregation page, which can effectively increase the number of internal links and depth of a website, providing more crawling paths for search engines.At the same time, if the Tag name is a long-tail keyword frequently searched by users, these Tag pages can be better indexed and ranked by search engines, attracting more accurate traffic.
  • Enrich content dimensions: Tag provides a new content