How to implement content aggregation and thematic display based on `tagList` and `tagDetail` tags?
In content management and website operation, how to efficiently organize and display content is the key to improving user experience and SEO performance. AnQiCMS (AnQiCMS) provides powerful tag features, throughtagListandtagDetailThese template tags can easily implement content aggregation based on tags and thematic display, bringing more flexible categorization and a richer navigation experience to the website.
The role of tags in content aggregation
Tags (Tag) are an important way to organize content in a content management system, complementing the traditional category (Category).If categorization is a structured hierarchical relationship that assigns content to a specific field, then tags are a more flexible, flattened way of associating that can cross different categories, aggregating content with common themes or keywords together.
For example, an article about 'website optimization' can belong to the 'marketing' category, but it can also be tagged with 'SEO', 'user experience', 'content strategy', and other tags.These tags not only help users find related content quickly, but also provide richer semantic information for search engines, improving the SEO effect of the website.In AnQi CMS, the backend content management provides an intuitive label creation and management interface, allowing us to attach multiple labels to content models such as articles and products, and customize the URL alias, SEO title, and description of the labels, laying a foundation for refined operation.
tagListTags: Discover and display a diverse collection of tags
tagListTags are mainly used to display tag lists at various positions on the website, such as "Hot Tags", "Related Tag Cloud", or alphabetical tag index.It can help visitors quickly find the main topics and hot discussion topics on the website.
To usetagListWe usually define a variable to receive the list of tags, then iterate through them to display them. For example, displaying 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 a variable defined by us,limit="10"Limited to displaying only 10 tags.item.Linkanditem.TitleRespectively obtained the link and title of the tags.
tagListAlso supports other parameters such asitemIdYou can get the list of tags associated with the specified document whenitemId="0"In this case, it will retrieve all tags instead of automatically reading the tags of the current document.categoryIdParameters allow 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 onlytag/index.htmlortag/list.htmlTake effect in specific templates and need to be combinedpaginationTags to build page navigation
tagDetailTag: Deeply understand the topic page of a single tag
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 label, as well as all the content associated with the label.tagDetailThe role of the tag is to obtain detailed data of a single tag, providing data support for building such a special topic page.
In the tag topic page (for example, in)tag/detail.htmltemplate),tagDetailThe tag will default to reading the current page's tag ID. We canname="字段名称"to obtain specific attributes of the tag, such as the title, description, and even custom cover images.
<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 %}
tagDetailInclude the fields returnedId/Title/Link/Description/FirstLetter/Content(If the label has detailed content),LogoThis information can be used to enrich the topic page content, giving users a more comprehensive understanding of the theme represented by this tag.
tagDataListTag: Presents the aggregated content under the tag.
It is not enough to simply display the details of the label, the core of the label topic page is to present all the content associated with the label. At this point,tagDataListThe label comes in handy. It is specifically used to retrieve the document list under a specified label.
Generally,tagDataListwill be 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 ID of the current tag and then pass it totagDataList.type="page"the parameter so that the content list can be displayed in pages and passed throughpaginationCreate a complete pagination navigation. This way, users can browse all the content related to the tag on the tag topic page and can easily navigate through the pages.
Optimize the use of tags: improve user experience and SEO
The Anqi CMS tag function does not stop at the content display level, its powerful backend configuration capabilities also provide strong support for SEO.We can set independent SEO titles, keywords, and descriptions for each tag, even customize static URLs, making each tag topic page an independent traffic entrance, optimizing search engine crawling and ranking.
Rational utilizationtagListandtagDetailTags, not only can they improve the internal link structure of a website and enhance the browsing depth of users within the site, but they can also turn the website into an authoritative resource in a specific thematic field through refined content aggregation, thereby effectively enhancing the overall value of the website.
Frequently Asked Questions (FAQ)
What is the difference between Tag and Category in Anqi CMS?Tags and categories are both ways of organizing content, but they have different focuses.Categories are usually used to establish the hierarchical structure of content, assigning content to a fixed, broader field, such as "news", "tutorials", "products".And the tags are more flexible, they can cross categories, linking content of different categories but related in theme, such as "SEO", "Go language", "website skills".A content can belong to only one category, but can have multiple tags.
How can I implement pagination on my tag topic page?To implement pagination on the tag topic page (usually
tag/list.htmlortag/index.htmltemplate), you need to usetagDataListSet a tag,typethe parameter to"page"And specifylimitparameters to control the number of articles displayed per page. After that, combinepaginationCreate pagination links. For example: `{% tagDataList archives with tagId=Current tag ID type=“page” limit