In content management and website operation, how to efficiently organize and display content is the key to improving user experience and SEO performance. AnQiCMS (AnQi Content Management System) provides powerful tag features, throughtagListandtagDetailThese template tags can easily realize content aggregation and thematic display based on tags, bringing more flexible classification and a richer navigation experience to the website.
The role of tags in content aggregation
Tags (Tag) are an important content organization method in a content management system, which complements the traditional classification (Category).If classification is a structured hierarchical relationship that assigns content to a specific field, then tags are a more flexible and flattened way of association that can cross different categories, aggregating content that shares common themes or keywords together.
For example, an article about "website optimization" can belong to the "marketingThese tags not only help users quickly find relevant content, but also provide more rich semantic information for search engines, enhancing the website's SEO effect.In the Anqi CMS, the backend content management provides an intuitive tag creation and management interface, allowing us to attach multiple tags to articles, products, and other content models, and customize the URL alias, SEO title, and description of tags, laying a foundation for refined operation.
tagListTags: Discover and display a diverse collection of tags
tagListThe label is mainly used to display a list of labels at various positions on the website, such as "Hot TagsIt can help visitors quickly find the main topics and hot discussions on the website.
to usetagListWe usually define a variable to receive the list of tags, and then iterate through it to display them. For example, to show the top 10 tags in the website sidebar or footer:
<div>
<h3>热门标签</h3>
<ul>
{% tagList tags with limit="10" %}
{% for item in tags %}
<li><a href="{{item.Link}}">{{item.Title}}</a></li>
{% endfor %}
{% endtagList %}
</ul>
</div>
In this example,tagsIt is the variable we define,limit="10"which limits to display only 10 tags.item.Linkanditem.TitleRespectively obtained the link and title of the tag.
tagListAlso supports other parameters, such asitemIdCan obtain the list of tags associated with a specified document, whenitemId="0"all tags will be obtained instead of automatically reading the tags of the current document.categoryIdThe parameter allows us to filter tags under specific categories. If you need to create a tag index page and support pagination, you can settype="page", but this usage is usually only intag/index.htmlortag/list.html生效于特定模板中，并需要结合pagination标签来构建分页导航。
tagDetail标签：深入了解单个标签的专题页面
When a user clicks on a tag, they will usually enter a special 'tag topic page' or 'theme page'.This page should display the detailed information of the tag, as well as all the content associated with the tag.tagDetailThe function of the label is to obtain detailed data of a single label, providing data support for building such thematic pages.
On the label thematic page (for example, intag/detail.htmltemplate),tagDetailThe label will default to reading the current page's label ID. We can obtain specific properties of the label, such as the title, description, and even custom cover images, by using thename="字段名称"method.
<h1>{{ tagDetail with name="Title" }}</h1>
<p>{{ tagDetail with name="Description" }}</p>
{# 假设后台为标签上传了Logo图片，可以在专题页顶部展示 #}
{% set tagLogo = tagDetail with name="Logo" %}
{% if tagLogo %}
<img src="{{ tagLogo }}" alt="{{ tagDetail with name="Title" }}" />
{% endif %}
tagDetailThe returned fields includeId/Title/Link/Description/FirstLetter/Content(If the label has detailed content),LogoThese information can be used to enrich the topic page content, allowing users to have a more comprehensive understanding of the theme represented by this label.
tagDataListTag: Show the aggregated content under the tag.
The core of a tag topic page lies in presenting all the content associated with the tag. At this point,tagDataListThe label comes into play. It is specifically used to retrieve the document list under a specified label.
Usually,tagDataListwill be associated withtagDetailUsed on the same label topic page, throughtagIdparameters to specify which label's content to query.
{# 假设我们已经在当前页面通过URL获取到了当前标签的ID #}
{% set currentTagId = tagDetail with name="Id" %} {# 获取当前标签的ID #}
{% if currentTagId %}
<h2>与 "{{ tagDetail with name="Title" }}" 相关的内容</h2>
<ul>
{% tagDataList archives with tagId=currentTagId type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</a>
</li>
{% endfor %}
{% endtagDataList %}
</ul>
{# 结合分页标签显示分页导航 #}
<div>
{% pagination pages with show="5" %}
<a href="{{pages.FirstPage.Link}}">首页</a>
{% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
{% for pageItem in pages.Pages %}
<a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
{% endfor %}
{% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
<a href="{{pages.LastPage.Link}}">末页</a>
{% endpagination %}
</div>
{% else %}
<p>未找到相关标签信息或内容。</p>
{% endif %}
In this example, we first obtain the current tag's ID and then pass it totagDataList.type="page"the parameter so that the content list can be displayed in pages and bypaginationLabel generates a complete pagination navigation. In this way, users can browse all the content related to the label on the label topic page and can easily turn pages.
Optimize the use of tags: Improve user experience and SEO
The tag function of Anqi CMS not only stays at the level of content display, but also provides strong backend configuration capabilities to support SEO.We can set independent SEO titles, keywords, and descriptions for each tag, even customize the static URL, making each tag topic page an independent traffic entry, optimizing search engine crawling and ranking.
Rationally utilizetagListandtagDetailTags, not only can improve the internal link structure of the website and enhance the browsing depth of users on the website, but also through refined content aggregation, can build the website into an authoritative resource in a specific thematic field, thereby effectively enhancing the overall value of the website.
Common Questions (FAQ)
What is the difference between Tags and Categories in the Anqi CMS?Labels and categories are both ways of content organization, but with different focuses.分类通常用于建立内容的层级结构，将内容归属于一个固定的、更广泛的领域，例如“新闻”、“教程”、“产品”。And tags are more flexible, allowing content related to different categories but with the same theme to be associated, for example, 'SEO', 'Go language', 'Website building skills'.An item can belong to only one category, but can have multiple tags.
How can I implement pagination on my tag topic page?To be displayed on the label topic page (usually)
tag/list.htmlortag/index.htmltemplate), you need to implement pagination by using thetagDataListwilltypeparameter settings"page", and specifylimitparameter to control the number of articles displayed per page. After that, combinepaginationLabel to generate pagination links. For example: `{% tagDataList archives with tagId=Current tag ID type=“page” limit