How to effectively organize and display content in a content management system is the key to enhancing user experience and SEO-friendliness.AnQiCMS provides a powerful Tag feature to help us classify and display content more finely.This article will introduce in detail how to flexibly use tags in AnQiCMS, including displaying tag lists, viewing detailed information of individual tags, and listing documents associated with specific tags.
The role of tags in AnQiCMS
In AnQiCMS, a tag is a flexible content organization method, which is different from the traditional category (Category).Categories usually represent the hierarchical structure of content, while tags are more focused on the keywords or thematic associations of content.
- Enhance content discoverabilityUsers can quickly find all related articles by clicking on tags.
- Optimize SEO：The tab can act as a landing page for long-tail keywords, helping search engines better understand the content of the website.
- Improve user experienceEnglish: Provides multi-dimensional content navigation for users, enhancing the interactivity and stickiness of the website.
In AnQiCMS backend, you can easily manage all tags.Enter the "Content Management" under the "Document Tag" feature to perform addition, editing, and deletion operations.Each tag has a name, index letter, description, custom URL, and SEO-related settings, all of which provide convenience for front-end display and search engine optimization.
English: Display the tag list on the website.
To display the tag list at any location on the website (such as the sidebar, bottom of articles, or a dedicated tag cloud page), AnQiCMS providestagListLabel. This label is very flexible and can display various types of label collections according to different needs.
For example, if you want to display the top 10 tags on your website, you can use the following methodtagList:
<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,tagsis the variable name we define,limit="10"Limited to displaying 10 tags. EachitemcontainsId/Title(Tag name) andLink(Tag page link) and other common information, which can be called as needed.
Moreover, when you need to display all the tags associated with the current article on the article detail page,tagListit can also be put to use. At this time, you can utilizeitemIdThe parameter, to display only tags related to the current document on the tag list.
<div>
<strong>文章标签：</strong>
{% tagList tags with itemId=archive.Id limit="10" %}
{% for item in tags %}
<a href="{{item.Link}}">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
</div>
Here,archive.IdIt will automatically get the ID of the current article and ensure that only unique tags of the current article are displayed.
Display the detailed information of a single label
When a user clicks on a tag, they will usually enter a dedicated tag detail page.On this page, we may need to display the title, description, and other detailed information of this tag to tell the user the theme of the current page.tagDetailTags to get all related data of a single tag.
Usually,tag/detail.htmlortag/index.html(If designed for all tag list and single tag detail to use this template) such a template file,tagDetailwill automatically obtain the current page's tag ID.
<main>
<h1>{{ tagDetail with name="Title" }}</h1>
{%- tagDetail tagDescription with name="Description" %}
{%- if tagDescription %}
<p>{{ tagDescription }}</p>
{%- endif %}
<p>该标签下共有 {{ tagDataList archives with type="list" limit="1" %}{{ archives|length }}{% endtagDataList }} 篇文章。</p>
</main>
In the above code,tagDetail with name="Title"Directly outputs the current label's title,tagDescription with name="Description"then retrieves the label's description, and throughifEnsure that there is description content before displaying, to avoid blank tags on the page. You can also get theId/Link/FirstLetter(index letter) andLogoand other fields.
display the documents associated with the tag
In the tag detail page, the most core function is of course to display all articles or products with this tag. AnQiCMS'stagDataListTags are specifically used for this purpose. They can retrieve and display all associated documents based on the tag ID, and support pagination features to make content display more user-friendly.
In the template of the tag detail page, you can use it like thistagDataListto display the list of related articles:
<section>
<h2>相关文章列表</h2>
<ul>
{% tagDataList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description|truncatechars:100}}</p>
<span>发布时间: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量: {{item.Views}}</span>
</a>
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}">
{% endif %}
</li>
{% empty %}
<li>该标签下暂无文章。</li>
{% endfor %}
{% endtagDataList %}
</ul>
{# 分页导航 #}
<nav class="pagination">
{% pagination pages with show="5" %}
{% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
{% for page in pages.Pages %}<a class="{% if page.IsCurrent %}active{% endif %}" href="{{page.Link}}">{{page.Name}}</a>{% endfor %}
{% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
{% endpagination %}
</nav>
</section>
Here,tagDataListAutomatically identify the ID of the current tag page and list the related articles in a paginated formtype="page"andlimit="10".archivesEach in the variableitemIt will include articles.Id/Title/Link/Description/Thumb[Thumbnail],CreatedTime(Publish time) andViews(Read count) and other information. The bottompaginationtags are responsible for generating beautiful pagination links, allowing users to easily browse all related content.
PasstagList/tagDetailandtagDataListThese three core tags, AnQiCMS provides comprehensive and powerful support for the tagging and display of content, helping the website better organize content, enhance user experience, and improve search engine performance.
Common Questions (FAQ)
问：标签和分类有什么区别？我应该如何选择使用它们？答：Tags and categories are both ways to organize content, but they have different focuses.Categories are typically used to build the hierarchical structure of a website, and content is strictly attributed to one or more categories.The label is more like a keyword or theme of the content, a content can be marked with multiple labels, and the labels are usually not in a hierarchical relationship.When selecting, you can use core, broad topics as categories, and more specific, flexible keywords as tags to provide multi-dimensional content navigation.
问：AnQiCMS 的标签页面 URL 结构可以自定义吗？答：可以的。AnQiCMS provides powerful pseudo-static rule setting functionality.Find "pseudo-static rules" in the background function management, you can choose or customize the URL structure of the tab page.
tag/index.htmlortag/list.htmlBut you can customize the rules to make the URL more descriptive or more SEO-friendly, for example/tags/{tagname}.htmlor/topic/{id}.htmlEnglish. In the tag background settings, each tag can also be set to a custom URL alias.Question: Why did I set the tag, but it did not display on the front-end page?答：有几个常见原因可能导致标签未显示：
- 模板代码缺失或错误：请检查您的模板文件（如
bash.html/tag/index.htmlorarchive/detail.html等）中是否正确使用了tagList/tagDetailortagDataListLabel, and ensure that the names of variables, parameters, etc. are spelled correctly. - Label not associated with content: If you expect
tagListShow tags for an article, but since no tags have been added to the article, they will not be displayed naturally. Or, if there are no associated documents under a certain tag,tagDataListit will also be displayed as empty. - Cache issues：After modification in the background, please try to clear the system cache and clean up the browser cache to ensure that the latest content is loaded.
- Permission or publication statusEnsure that the label itself is not disabled and that all associated articles are in the published state.
- 模板代码缺失或错误：请检查您的模板文件（如