Auto CMS provides a powerful and flexible tag (Tag) feature, helping us better organize content, improve the SEO performance of the website, and provide users with a more convenient way to discover content.By making good use of tags, we can easily create content aggregation pages, allowing visitors to quickly find related articles or products based on their interests.
I. Understanding the core value of the Tag function
In the AnQi CMS, tags are not just keywords for content, they are more like the links connecting different content.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.This way, users interested in "backend development" can not only enter the backend development section 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 content aggregation capability significantly enhances the following aspects of the website:
- Enhance the organization of content:Break through the hierarchical limitations of traditional classification and form multidimensional content correlation.
- Optimize user experience:Users can discover interesting content more efficiently, improving the duration of their stay on the website.
- Help optimize search engine optimization (SEO):Each tab can become a unique entry, bringing more long-tail keyword traffic.By setting independent TDK (Title, Description, Keywords) for each tab, 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.
- 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” (very important for SEO, as it can set more semantic 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.
- Existing tags can also be edited and deleted here.
- Associate tags with content:
- When publishing or editing articles, products, and other documents, there will be an input box called 'Tag tag' on the page.
- We can directly input a new tag name (press Enter key to convert it to a tag), and the system will automatically save it and associate it with the current document; you can also choose an existing tag for association.A document can be associated with multiple tags.
After completing these backend operations, our content has already been internally connected through tags. Next, these tabs need to be presented in the frontend template.
Three, Display 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. Show the list page of all tags (for exampletag/index.html)
We usually create a page that focuses on displaying all the tags on the website, making it convenient for users to browse. This page usually corresponds to the template file/template/你的模板目录/tag/index.html.
We can list all tags on this page by usingtagListTags:
{# 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 from the website and paginate them by 30 per page. We will assign the result totagsa variable.{% for item in tags %}Loop through each label,item.LinkGet the link of the tab page,item.TitleGet the label name,item.DescriptionGet the label description.{% pagination pages with show="5" %}A pagination navigation for the label list will be generated.
2. Show the content aggregation page under a specific tag (for exampletag/list.html)
This is the core of the tag function - showing all related documents under a specific tag. This page usually corresponds to the template file/template/你的模板目录/tag/list.htmlWhen the user clicks on a tag link, the page will jump to this one.
In this page, we need to do two things:
- Get detailed information (name, description, SEO information) of the current tag.
- Get all documents associated with the current tag.
English code example, showing 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