In website operation, tags (Tags) are an important tool for content organization and user discovery.An clear and complete list of tags can help users quickly find the content they are interested in and improve the website's SEO performance, guiding search engines to better understand the structure of the website content.The AnQi CMS provides powerful and flexible tag management and display functions, allowing you to easily display a list of all tags used in the website.
The display method of the website tag list
If you wish to set up a dedicated page on the website to showcase all the tags used, you would typically create a 'tag cloud' or 'tag index' page. In Anqi CMS, this can be done through template tagstagListCoordinated with pagination tagspaginationto achieve.
Firstly, you can use it in the custom template directory (for example,templatefolder.tag/index.htmlor in your custom page template),tagListyou can use the tag to get all tag data. To implement pagination, we will specifytagListin it.type="page"，and set the number of tags displayed per page (limit).
For example, the following code snippet demonstrates how to retrieve and display all tags and provides pagination functionality:
<div class="tag-list-container">
{% tagList tags with type="page" limit="50" %} {# 获取所有标签，每页显示50个 #}
{% if tags %}
<ul class="tag-cloud">
{% for item in tags %}
<li><a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>目前网站还没有任何标签。</p>
{% endif %}
{% endtagList %}
{# 接着，使用分页标签来展示分页导航 #}
{% pagination pages with show="5" %} {# 显示5个页码按钮 #}
<nav class="pagination-nav">
{% if pages.PrevPage %}
<a href="{{ pages.PrevPage.Link }}" class="prev">上一页</a>
{% endif %}
{% for p in pages.Pages %}
<a class="{% if p.IsCurrent %}active{% endif %}" href="{{ p.Link }}">{{ p.Name }}</a>
{% endfor %}
{% if pages.NextPage %}
<a href="{{ pages.NextPage.Link }}" class="next">下一页</a>
{% endif %}
</nav>
{% endpagination %}
</div>
In this code block:
{% tagList tags with type="page" limit="50" %}It will fetch all tags from the database and organize them in a paginated form.tagsIs the variable name you define for the tag list.type="page"Specifies the pagination mode is enabled.limit="50"It controls the number of tags displayed per page.{% for item in tags %}Loop through each tag obtained.{{ item.Link }}it will output the URL address of the label.{{ item.Title }}Then, the name of the tag is displayed.{% pagination pages with show="5" %}Tags are used to generate pagination navigation.pagesIs the variable name you define for pagination data.show="5"Represents that up to 5 page buttons are displayed. By judgmentpages.PrevPage/pages.NextPageand traversalpages.Pages, you can build a complete 'Previous page', 'Next page', and numeric page navigation.
With such settings, your website will have a rich, easy-to-navigate full-site tag list page.
Show related tags on a single document page.
In addition to the full site tag list, you may also want to display tags associated with the document on the bottom or side of each document detail page (article, product, etc.). This can also be achieved bytagListLabel implementation, but needs to be配合itemIdParameters to specify the document ID.
In the template of the document detail page (such as)archive/detail.html), it is assumed that the current document ID can be accessed througharchive.IdGet, you can display related tags like this:
<div class="document-tags">
<h3>本文标签：</h3>
{% tagList docTags with itemId=archive.Id %} {# 获取与当前文档（archive.Id）相关联的标签 #}
{% if docTags %}
<ul>
{% for tag in docTags %}
<li><a href="{{ tag.Link }}" title="查看更多关于{{ tag.Title }}的内容">{{ tag.Title }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>该文档暂无标签。</p>
{% endif %}
{% endtagList %}
</div>
Here,itemId=archive.Idis crucial, it tellstagListTags only return tags associated with the current document ID.docTagsIs the variable name you defined for the tag list of this specific document.
Use flexibly to enhance user experience
Reasonably display and utilize tags, which can not only help users more conveniently explore the website content and form a good internal circulation, but also help search engines better grasp and understand the thematic relevance of the website, thereby improving the overall SEO effect of the website.
Common Questions (FAQ)
1. How to display the full site tag list in alphabetical order?
By default,tagListThe label will be sorted according to the creation or update time of the label in the background. If you need to sort alphabetically (or by the initial letter of the pinyin), the front-end of Anqi CMS currentlytagListThe label does not provide a direct sorting parameter.You can consider two methods: one is to follow a certain order when naming and managing tags in the background management interface; the other is to use the sorting function of JavaScript to achieve custom sorting display after obtaining the tag list through JavaScript in the front-end.
2. Can only show tags under specific categories instead of all site tags?
OK.tagListTags provide acategoryIdParameter used to specify which tags are associated with documents under a specific category or categories. For example,{% tagList tags with categoryId="1,2" %}Tags used by documents under category IDs 1 and 2 will be displayed.
3. How to limit the display number of tag lists, for example, to display only the top 10 tags?
tagListTagslimitParameters can help you control the display number. For example,{% tagList tags with limit="10" %}This will only display the first 10 tags. It is important to note,tagListIt does not have a built-in "hot" sorting parameter, it usually takes the top N by default sorting (such as creation time).If you need to sort by "popular" (such as more usage), it may be necessary to customize the data acquisition logic on the backend or achieve it through more advanced template variable processing.