AnQiCMS as an efficient and flexible content management system provides a rich set of features to help operators manage and display website content.Among other things, the Tag label function of the article is an important factor in optimizing content organization, improving user experience and SEO effects.Understand how to obtain and display these tags in front-end templates, which is crucial for building a website with comprehensive features.
Manage tags in the AnQiCMS background
Before delving into the front-end template, let's briefly review how tags work in the AnQiCMS backend. AnQiCMS provides users with an intuitive tag management interface.
InContent ManagementPart, whether it isPublish documentOredit documentsYou can find the "Tag Tag" field. Here, you can add one or more tags to the article, you can choose existing tags, or you can directly input a new tag and press Enter to create it.These tags are like keywords for the content, which can associate articles with related topics.
Furthermore,Content ManagementThere is also a special one belowDocument TagFunction, you can view, edit, and delete all the tags created here, even set custom URLs, SEO titles, and descriptions for them, which is very helpful for the SEO optimization of the tab page.
Through these background operations, we have prepared rich tag data for the front-end display.
Understand AnQiCMS template basics
The AnQiCMS template engine syntax is similar to Django, which allows front-end developers to get started quickly. In the template files, we mainly interact with data in two ways:
- Use
{{变量}}Directly output the value of the variable. - Use
{% 标签 %}and{% end标签 %}Execute logical judgments, loops, data queries, and other operations.
Understanding these basic syntax is the premise of successfully obtaining and displaying tags on the front-end.
Get and display the Tag label of the article on the article detail page
When a user browses a specific article, it is usually necessary to see the tags of the article in order to quickly understand the theme of the article or jump to more content under the related tags.In the AnQiCMS article detail template, it is very direct to obtain and display the tags of the current article.
We can usetagListTag to get the tag list associated with the current article. This tag defaults to reading the article ID of the current page, so you do not need to specify it separatelyitemIdParameter.
Here is a simple code example demonstrating how to display tags on the article detail page:
<div class="article-tags">
<strong>标签：</strong>
{% tagList tags with limit="10" %} {# 获取当前文章的最多10个标签 #}
{% for item in tags %}
<a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
</div>
In this code block,tagList tags with limit="10"Will assign up to 10 tags associated with the current article totagsthe variable. Subsequently, we use{% for item in tags %}Loop through these tags and through{{item.Link}}Get the link address of the tags,{{item.Title}}Get the tag name, so that a clickable tag list can be rendered on the front end.
Display the list of popular tags on the entire site (tag cloud)
In addition to displaying tags in individual articles, websites usually also need a "tag cloud" or "hot tags" area to concentrate on showing all the tags on the site, guiding users to discover more content.
To get the full site tag list, you also usetagListtags, but you need to specify explicitlyitemId="0", indicating that it is not associated with any specific article but to get all tags. You can also uselimitParameter controls the number of items displayed, such as displaying the top 20 tags.
Here is an example of code to retrieve and display the site's popular tags.
<div class="popular-tags">
<h2>热门标签</h2>
<ul>
{% tagList allTags with itemId="0" limit="20" %} {# 获取全站的最多20个标签 #}
{% for tag in allTags %}
<li><a href="{{tag.Link}}" class="tag-link">{{tag.Title}}</a></li>
{% endfor %}
{% endtagList %}
</ul>
</div>
Here we assign all tags toallTagsVariables, and display their names and links in a loop. You can add different styles or adjust the order of these tags according to your actual needs.
Create an independent tag list page (tag/index.html)
AnQiCMS allows you to create a dedicated tag list page, for example/tagsThe path used to display all tags of the website and support pagination. According to the AnQiCMS template convention, such pages are usually namedtag/index.html.
In such a page,tagListLabel combinationtype="page"Parameters can implement pagination display of the tag list. At the same time, cooperate withpaginationTags can generate a complete pagination navigation
{# 假设这是 tag/index.html 模板文件 #}
<h1>所有标签</h1>
<div class="tag-list-pagination">
{% tagList tags with type="page" limit="20" %} {# 每页显示20个标签，并启用分页 #}
<ul class="tag-grid">
{% for item in tags %}
<li>
<a href="{{item.Link}}" class="tag-card">
<h3>{{item.Title}}</h3>
<p>{{item.Description | truncatechars:100}}</p> {# 显示标签描述，并截取前100字 #}
</a>
</li>
{% empty %}
<li>
暂无任何标签。
</li>
{% endfor %}
</ul>
{% endtagList %}
{# 分页导航 #}
<div class="pagination-controls">
{% pagination pages with show="5" %}
{# 首页 #}
<a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
{# 上一页 #}
{% if pages.PrevPage %}
<a class="page-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
{% endif %}
{# 中间多页 #}
{% for item in pages.Pages %}
<a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}
{# 下一页 #}
{% if pages.NextPage %}
<a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
{% endif %}
{# 尾页 #}
<a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
{% endpagination %}
</div>
</div>
Display the list of articles under a specific tag (tag/list.html)
When a user clicks on a specific tag, the website usually jumps to a page that displays all the