English article tag list and link generation and display in AnQiCMS template
As a website operator who deeply understands the operation of AnQiCMS and has a profound understanding of content operation, I know that article tags (Tag) play a core role in enhancing content discoverability, optimizing user experience, and strengthening website SEO.Labels can not only help readers quickly find related content, but also provide more rich semantic information for search engines.This article will detail how to efficiently display the tag list in the AnQiCMS template and generate clickable links for each tag.
Understanding the tag function of AnQiCMS
AnQiCMS provides a user-friendly tag management system.Under the "Content Management" module in the background, you can find the "Document Tags" feature.Here, you can create, edit, manage all tags, and configure information such as tag names, index letters, custom URLs, SEO titles, and descriptions.These backend settings are the basis for the front-end template display tags.
AnQiCMS's template engine supports tag syntax similar to Django, through specific tags, we can easily call and render data configured on the backend on the front end. For article tags, the system mainly provides the following key template tags:
tagListtags：Used to obtain the list of tags associated with the document, or to obtain the tag list of the entire site.tagDetailtags：Used to obtain the detailed information of a single tag, such as displaying the description of the tag on the tag detail page.tagDataListtags：Used to get the list of articles under a specific tag, which is the core of building the tag detail page.
Display the tag list of the article in the article detail page and generate links.
On the detail page of the article, we usually need to display all the tags associated with the current article. These tags should be clickable to guide users to explore more related topics.
Firstly, make sure that your article detail page template (usually) is correctly imported. In the template, you can use the tag to get the current article's tags.{模型table}/detail.html) has been correctly imported. In the template, you can use the tag to get the current article's tags.tagListtag to get the current article's tags.tagListTags are not specifieditemIdParameters, by default will read the document ID of the current page, thus obtaining tags associated with the current article.
An implementation method is to traverse the obtained label set and create a link for each label:
{# 假设您正在文章详情页的模板中 #}
<div class="article-tags">
<strong>标签：</strong>
{% tagList tags %} {# 默认获取当前文章的标签 #}
{% for item in tags %}
<a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a>
{% endfor %}
{% endtagList %}
</div>
In this code block:
{% tagList tags %}Declared a namedtagsvariable that contains all the label data of the current article.{% for item in tags %}Start the loop traversaltagsEach label in the variable. In each loop,itemrepresents an independent label object.{{ item.Link }}This will output the link address of the tag on the website, which usually points to the article list page under the tag.{{ item.Title }}This will output the name of the tag, which is the clickable text displayed to the user.title="{{ item.Title }}"The attribute added mouse hover tooltip for label link, enhancing user experience and SEO friendliness.
Display all site popular tags or tag cloud
In addition to displaying tags on the article detail page, you may also want to show the site's popular tags or a tag cloud in the website's sidebar, footer, or a dedicated tag index page.
To achieve this, you can use it againtagListtags, but this time you need to control the display quantity throughlimitthe parameters and display them throughitemId="0"明确表示不关联任何特定文章，而是获取全站的标签。
例如，在侧边栏模板（如)partial/sidebar.html）中显示10个热门标签：
<div class="tag-cloud">
<h3>热门标签</h3>
{% tagList tags with itemId="0" limit="10" %} {# 获取全站前10个标签 #}
{% for item in tags %}
<a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a>
{% endfor %}
{% endtagList %}
</div>
Please note,tagListTagslimitThe parameter allows you to control the number of returned tags.itemId="0"Make sure it retrieves tags from the entire site range, not just a specific article.
Build the tag detail page
When a user clicks on a tag link, they should be taken to a page that displays all articles under that tag. AnQiCMS usually names the template of such pages astag/list.htmlortag/index.html.
In these tag detail pages, we will mainly usetagDataListtags to get the list of articles associated with the current tag.tagDataListThe label on the label detail page will automatically identify the label ID of the current page. At the same time, to better display the content, we will also combinepaginationthe label to implement pagination of the article list.
The followingtag/list.htmlTemplate example:
{# tag/list.html 模板内容 #}
{% comment %}
首先，获取当前标签的详细信息，以便在页面标题或描述中使用
{% endcomment %}
<h1>标签：{% tagDetail with name="Title" %}</h1>
<p>{% tagDetail with name="Description" %}</p>
{% comment %}
接着，获取该标签下的文章列表并进行分页展示
{% endcomment %}
<div class="tag-articles">
{% tagDataList archives with type="page" limit="10" %} {# 获取当前标签下每页10篇文章 #}
{% for item in archives %}
<div class="article-item">
<h2><a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a></h2>
<p>{{ item.Description }}</p>
<p>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }} | 浏览量：{{ item.Views }}</p>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
{% endif %}
</div>
{% empty %}
<p>该标签下暂时没有文章。</p>
{% endfor %}
{% endtagDataList %}
{% comment %}
分页导航
{% endcomment %}
<div class="pagination-controls">
{% pagination pages with show="5" %}
<ul>
{% if pages.FirstPage %}
<li {% if pages.FirstPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a></li>
{% endif %}
{% if pages.PrevPage %}
<li><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a></li>
{% endif %}
{% for item in pages.Pages %}
<li {% if item.IsCurrent %}class="active"{% endif %}><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% endfor %}
{% if pages.NextPage %}
<li><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>
{% endif %}
{% if pages.LastPage %}
<li {% if pages.LastPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a></li>
{% endif %}
</ul>
{% endpagination %}
</div>
</div>
This code first utilizes:tagDetailDisplays the title and description of the current tag, then through:tagDataListto list all related articles in the form of pagination:type="page"Finally, use:paginationThe label renders a complete pagination navigation.
By using the above method, you can flexibly display article tags and their links in the AnQiCMS template, greatly enriching the content organization form of the website and enhancing the browsing experience of users on the website.
Common Questions (FAQ)
Q: How to control the number of tags displayed on the article detail page?A:tagListtag supportlimitParameter to control the number of tags displayed. For example, if you only want to display the first 5 tags of the article, you can modify the code to{% tagList tags with limit="5" %}.
Q: Can I only display tags under specific categories?A: Yes,tagListtag supportcategoryIdParameters. You can specify one or more category IDs (separated by commas), for example{% tagList tags with categoryId="1,2" %}English: Such tags will only be displayed for articles related to category ID 1 or 2.
English: Q: Will a tag without any associated articles still be displayed in the tag cloud?A:tagListLabel will only return tags associated with articles by default. If a tag has no articles associated with it, it is usually not shown.tagListReturn, therefore it will not be displayed in the tag cloud. If you want to handle this situation, you can add{% for item in tags %}it in the loop{% empty %}a label to display a prompt like 'No tags' or similar.