How to display the Tag list of articles in AnQiCMS template and generate links for each Tag?
AnQiCMS template article tag list and link generation and display
As an operator who deeply understands the operation of AnQiCMS and has a profound understanding of content operation, I know that article tags play a core role in enhancing the discoverability of content, 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 of articles in the AnQiCMS template and generate clickable links for each tag.
Understanding AnQiCMS tag function
AnQiCMS provides a user-friendly tag management system.In the "Content Management" module in the background, you can find the "Document Tag" feature.Here, you can create, edit, manage all tags, and configure names, index letters, custom URLs, SEO titles, and descriptions for tags.These backend settings are the foundation for the display labels of the front-end template.
AnQiCMS template engine supports tag syntax similar to Django, through specific tags, we can easily call and render data configured on the backend from the front end. For article tags, the system mainly provides the following key template tags:
tagListTagUsed to obtain the list of tags associated with the document, or to obtain the list of tags for the entire site.tagDetailTagUsed to obtain the detailed information of a single tag, such as displaying the description of the tag on the tag detail page.tagDataListTagUsed to retrieve the list of articles under a specific tag, which is the core of building the tag detail page.
Display the tag list of articles on the article detail page and generate links.
On the article detail page, 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.
First, make sure that your article detail page template (usually{模型table}/detail.html) has been correctly introduced. In the template, you can usetagListtags to get the current article tags.tagListTag without specifyingitemIdWhen a parameter is specified, it will default to reading the document ID of the current page to retrieve the tags associated with the current article.
A typical implementation is to iterate over the obtained tag set and create links for each tag:
{# 假设您正在文章详情页的模板中 #}
<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 tag data for the current article.{% for item in tags %}Start looping throughtagsEach tag in the variable. In each loop,itemrepresents an independent tag object.{{ item.Link }}The link address of the tag on the website will be output, which usually points to the article list page under the tag.{{ item.Title }}The name of the tag will be output, which is the clickable text displayed to the user.title="{{ item.Title }}"The attribute added a tooltip text on hover for tag links, enhancing user experience and SEO friendliness.
Display the site's popular tags or tag cloud.
In addition to displaying tags on the article detail page, you may also want to display 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 go throughlimitparameters to control the number of displays, and go throughitemId="0"Explicitly indicates that it is not associated with any specific article, but to obtain the tags of the entire site.
For example, in the sidebar template (such as)partial/sidebar.html) Display 10 popular tags:
<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,tagListlabel'slimitThe parameter allows you to control the number of tags returned,itemId="0"Make sure it retrieves tags from the entire site, 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 the articles under that tag. AnQiCMS usually names the template for 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.tagDataListTags are displayed on the tag detail page, automatically identifying the tag ID of the current page. At the same time, in order to better display the content, we will also combinepaginationtags to implement pagination of the article list.
The followingtag/list.htmlAn example template:
{# 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 utilizestagDetailDisplay the title and description of the current tag, then proceed throughtagDataListList all related articles in the form oftype="page"), and finally usepaginationthe tag to render the complete page 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.
Frequently Asked Questions (FAQ)
Q: How to control the number of tags displayed on the article detail page?A:tagListTag supportlimitThe parameter is used 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" %}This will only display tags related to articles with category ID 1 or 2.
Q: Will a tag still be displayed in the tag cloud if it is not associated with any articles?A:tagListThe tag defaults to returning tags that are associated with articles. If a tag has no articles, it is usually nottagListReturn, therefore it will not be displayed in the tag cloud. If you want to handle this situation, you can{% for item in tags %}add in the loop{% empty %}a tag to display 'No tags' or similar prompts.