How to use the Tag feature of AnQi CMS to display related content aggregation pages on the front end?

Our CMS provides a powerful and flexible tag (Tag) feature that helps us better organize content, improve the website's SEO performance, and provide users with a more convenient way to discover content.By using labels reasonably, we can easily create content aggregation pages, allowing visitors to quickly find relevant articles or products based on their interests.

1. Understand the core value of the Tag feature

In Anqi CMS, tags are not just keywords of content, they are more like a connection between different contents.When we assign one or more tags to a document, we are actually creating new content associations for it.For example, an article introducing "Go Language development" can be tagged with "Go Language", "Backend Development", "Microservices", and so on.In this way, users interested in "backend development" can not only enter the backend development column through categories, but also discover all articles related to this topic by clicking on the "backend development" tag, regardless of which category they belong to.

This ability to aggregate content significantly improves the following aspects of the website:

• Enhance content organization:Break through the hierarchical limitations of traditional classification to form multi-dimensional content associations.
• Optimizing user experience: Users can find the content they are interested in more efficiently, improving the time spent on the website.
• Help with search engine optimization (SEO):Each tab can become a unique entry point, bringing more long-tail keyword traffic.By setting independent TDK (Title, Description, Keywords) for tabs, it can further improve its performance in search engines.

How to set up and manage tags on the backend.

Before using the tag feature, we need to perform simple configuration and management on the AnQi CMS backend.

1. Create and manage tags:
   • Enter the background management interface, find the "Document Tag" under the "Content Management" module.
   • Here, we can add tags. Each tag can be set to have a 'tag name', 'index letter' (for easy alphabetical ordering), 'custom URL' (which is very important for SEO, and can be set to more semantically meaningful links), 'SEO title', 'tag keywords', and 'tag description'.These SEO-related settings will directly affect the visibility of the tag aggregation page in search engines.
   • Tags that have already been created can also be edited and deleted here.
2. Associate tags with content:
   • When publishing or editing articles, products, and other documents, there will be an input box for "Tag label" on the page.
   • We can directly enter a new tag name (press Enter to convert it to a tag), the system will automatically save it and associate it with the current document;You can also choose existing tags to associate with. A document can be associated with multiple tags.

After completing these backend operations, our content has already been internally connected through tags. Next, it needs to be presented in the front-end template.

Chapter 3, Displaying Tag Aggregation Page in Front-end Template

The template system of AnQi CMS is designed to be very flexible. For the tag function, it provides special tags to achieve the front-end display.

1. Display the list page of all tags (for exampletag/index.html)

We usually create a page that showcases all the tags on the website, making it convenient for users to browse. This page usually corresponds to a template file/template/你的模板目录/tag/index.html.

We can use to list all tags on this pagetagListTags:

{# tag/index.html - 示例代码，用于展示所有标签 #}
<div>
    <h1>所有标签</h1>
    {% tagList tags with type="page" limit="30" %} {# type="page" 启用分页，limit="30" 控制每页显示数量 #}
    <ul class="tag-list-all">
    {% for item in tags %}
        <li>
            <a href="{{item.Link}}" title="{{item.Description}}">
                <h3>{{item.Title}}</h3>
                {% if item.Description %}
                    <p>{{item.Description}}</p>
                {% endif %}
            </a>
        </li>
    {% empty %}
        <li>目前还没有任何标签。</li>
    {% endfor %}
    </ul>

    {# 标签列表的分页导航 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for page_item in pages.Pages %}
                <a class="{% if page_item.IsCurrent %}active{% endif %}" href="{{page_item.Link}}">{{page_item.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        {% endpagination %}
    </div>
</div>

In this example:

• {% tagList tags with type="page" limit="30" %}It will retrieve all tags on the website and paginate them by 30 per page. We will assign the result totagsVariable.
• {% for item in tags %}Loop through each tag,item.LinkGet the link of the tag page,item.TitleGet the tag name,item.DescriptionGet the tag description.
• {% pagination pages with show="5" %}Then pagination navigation will be generated for the tag list.

2. Display the content aggregation page under a specific tag (for exampletag/list.html)

This is the core function of the tag feature - displaying all relevant documents under a specific tag. This page usually corresponds to the template file/template/你的模板目录/tag/list.htmlWhen the user clicks on a tag link, it will jump to this page.

In this page, we need to do two things:

1. Get the detailed information of the current tag (name, description, SEO information).
2. Get all documents associated with the current tag.

”`twig {# tag/list.html - Example code to display content under a specific tag #}

{# 1. 获取当前标签的详细信息 #}
{% tagDetail currentTag %} {# 在 tag/list.html 页面中，tagDetail 会自动识别当前标签ID #}
<h1>标签：{{currentTag.Title}}</h1>
{% if currentTag.Description %}
    <p class="tag-description">{{currentTag.Description}}</p>
{% endif %}

<hr>

{# 2. 获取与当前标签关联的文档列表 #}
<ul class="archive-list-by-tag">
{% tagDataList archives with type="page" limit="10" %} {# type="page" 启用分页，limit="10" 控制每页显示数量 #}
{% for item in archives %}
    <li>
        <a href="{{item.Link}}" title="{{item.Title}}">
            <h2>{{item.Title}}</h2>
            {% if item.Thumb %}
                <img src="{{item.Thumb}}" alt="{{item.Title}}" class="archive-thumb">
            {% endif %}
            <p class="archive-description">{{item.Description}}</p>
            <div class="archive-meta">
                <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01