In AnQi CMS, flexibly displaying the Tag label list of articles or products is a key factor in improving the organization of website content and user experience.Through carefully designed tags, it not only helps visitors quickly find the content they are interested in, but also effectively optimizes search engine crawling and improves the website's SEO performance.Today, let's delve into how to make full use of the Tag feature in AnQiCMS, bringing new vitality to your website content.
Understanding the Tag tag in AnQiCMS
In AnQiCMS management background, the Tag tag function is designed to be very intuitive and powerful.它独立于传统的分类体系，为内容提供了另一种灵活的归类方式，有点类似于社交媒体中的“话题”。No matter whether you are publishing an article or a product, you can easily add one or more Tag tags in the editing interface.
You can find the 'Document Tags' option under the 'Content Management' menu in the backend, where all the Tag tags of your website are collected.Here, you can create, edit, or delete tags, and even set independent SEO titles, keywords, and descriptions for them, which is crucial for the SEO value of building tag aggregation pages.
Display Tag label list on the front-end
There are several common scenarios for displaying Tag labels on the front-end of the website, and we will discuss their implementation methods one by one.
1. Show all Tag tag list (e.g., popular tag cloud)
Imagine, you want to display a popular tag cloud on the sidebar, footer, or a dedicated tag aggregation page of your website, so that visitors can see all the main topics covered by the site at a glance. At this time, you can use the AnQiCMS providedtagListtags to achieve this.
To display all tags, you can write the template code like this:
<div class="tag-cloud">
{% tagList tags with limit="50" itemId="0" %}
{% for item in tags %}
<a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
</div>
In this code block:
tagList tagsDefined a namedtagsvariable to store the obtained list of tags.limit="50"Limited to displaying up to 50 tags. You can adjust this number based on your actual needs.itemId="0"It is a very important parameter, it tells the system to retrieve all tags on the website, not just tags under a specific article or product.- Pass
{% for item in tags %}Loop, we can iterate over each tag. {{item.Link}}It will output the URL of the aggregated page corresponding to the tag.{{item.Title}}Then, the name of the tag is displayed.{{item.Description}}(If the tag is set) it can be used astitlea property or displayed elsewhere to provide more information.
This code is usually placed in the sidebar of your theme template file (for example)partial/aside.html) or the footer (partial/footer.html), or a dedicated tag list page.
2. Display specific article or product Tag tags
When visitors browse specific articles or product detail pages, they usually want to see tags related to the current content.This helps them discover more similar topics or products.tagListLabel.
For example, in your{模型table}/detail.html(such asarticle/detail.htmlorproduct/detail.html）Template, you can add it like this:
<div class="article-tags">
<span>相关标签：</span>
{% tagList tags %}
{% for item in tags %}
<a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
</div>
You will notice that heretagListthe tag does not specifyitemIdthe parameter. This is because in the context of articles or product detail pages,tagListIt will intelligently default to fetching the Tag tags associated with the current page's articles or products, which is very convenient.
3. Display the list of articles or products under a specific Tag tag
The user clicks on a certain Tag after which, they are usually redirected to a dedicated page that displays all articles or products with that tag. Such a page is typically corresponded to in the template structure of AnQiCMS.tag/list.htmlTo display content on this page, we need to use.tagDataListLabel.
Additionally, to make this page more complete, we will also use.tagDetailLabel to get the detailed information (such as title, description) of the current label.paginationLabel to handle the pagination display of content.
In yourtag/list.htmlIn the template, you can construct it like this:
{# 获取当前Tag标签的详细信息 #}
<h1 class="tag-title">{% tagDetail with name="Title" %}</h1>
<div class="tag-description">{% tagDetail with name="Description" %}</div>
{# 展示该Tag标签下的文章或产品列表 #}
<ul class="tag-content-list">
{% tagDataList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<img src="{{item.Thumb}}" alt="{{item.Title}}" class="content-thumb">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
<span class="publish-date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</a>
</li>
{% empty %}
<li>
当前标签下没有任何内容。
</li>
{% endfor %}
{% endtagDataList %}
</ul>
{# 分页导航 #}
<div class="pagination-area">
{% pagination pages with show="5" %}
{% if pages.PrevPage %}
<a href="{{pages.PrevPage.Link}}" class="page-link">« 上一页</a>
{% endif %}
{% for item in pages.Pages %}
<a href="{{item.Link}}" class="page-link {% if item.IsCurrent %}active{% endif %}">{{item.Name}}</a>
{% endfor %}
{% if pages.NextPage %}
<a href="{{pages.NextPage.Link}}" class="page-link">下一页 »</a>
{% endif %}
{% endpagination %}
</div>
Here:
{% tagDetail with name="Title" %}and{% tagDetail with name="Description" %}It will directly output the title and description of the current tab.tagDataList archivesIt is used to get the list of articles or products associated with the current tag.type="page"It indicates that the pagination feature is enabled.limit="10"It sets the display of 10 items per page.{{item.Link}}/{{item.Title}}/{{item.Thumb}}and{{item.Description}}Corresponds to the link, title, thumbnail, and introduction of the content item.{% empty %}It will display a custom prompt when there is no content.{% pagination pages %}The tag is responsible for generating beautiful pagination links.
Template file and URL structure hints
To ensure that the above code runs correctly on your website, you need to make sure that there is a corresponding Tag template file in your theme template. In most cases:
/template/您的主题目录/tag/index.html：This can be the overview page for all tags./template/您的主题目录/tag/list.html：It is used to display the content list under a specific tag.
Moreover, AnQiCMS supports friendly URLs, which makes the URL structure of Tag tags very friendly to display for search engines and users. For example, a tag's URL might look like/tag-ID.htmlor/tags/标签别名.htmlThis helps the SEO performance of the tab page.
Summary
The Tag label function of Anqi CMS not only provides a flexible way to organize content, but also allows content operators to easily display a diverse list of tags on the front end through powerful template tags.Whether it is to build a popular tag cloud, display related tags of articles, or create a tag aggregation page, AnQiCMS can provide intuitive and efficient solutions.Mastering the usage of these tags will make your website content more hierarchical, easier for users to explore, thereby enhancing the overall user experience and SEO effects.
Common Questions (FAQ)
1. What is the difference between Tag tags and categories? How should I choose to use them?
Tag labels and categories are both ways to organize content, but they have different purposes and granularity. Category (Category) usually represents theoutline or thematic structureEnglish has a hierarchical relationship, such as "newsSpecific keywords, characteristics, or topics
2. How to make the URL of the Tag tab page more SEO-friendly?
AnQiCMS default supports pseudo-static URLs, which is very important for the SEO of Tag tag pages. You can find it in the background of the “