How to display the Tag tag list of articles or products in AnQiCMS?
In Anqi CMS, flexibly displaying the Tag tag list of articles or products is a key link to improving the organization of website content and user experience.By carefully designed tags, not only can it help visitors quickly find the content they are interested in, but it can also effectively optimize search engine crawling and improve the SEO performance of the website.Today, let's delve deeper 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 the AnQiCMS management backend, the Tag tag feature is designed to be very intuitive and powerful.It is independent of the traditional classification system, providing another flexible way to categorize content, somewhat similar to the 'topics' in social media.No matter whether you are publishing an article or a product, you can easily add one or more Tag tags in the edit interface.
You can find the 'Document Tag' 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 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., Hot Tag Cloud)
Imagine that you want to display a popular tag cloud in the sidebar, footer, or a dedicated tag aggregation page of your website, so that visitors can see all the main topics covered by the website at a glance. At this time, you can use the AnQiCMS providedtagListthe tag.
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 list of tags obtained.limit="50"Limited to displaying up to 50 tags. You can adjust this number according to your actual needs.itemId="0"It is a very important parameter, it tells the system to retrieve all tags on the website, not tags under a specific article or product.- By
{% 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}}It displays the name of the tag.{{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 examplepartial/aside.html) or the footer (partial/footer.html), or it can be a dedicated tag list page.
2. Show 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 find more similar topics or products. In AnQiCMS, you can use the template again on the article or product detail page.tagList.
For example, in your{模型table}/detail.html(such asarticle/detail.htmlorproduct/detail.htmlIn the 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 an article or product detail page,tagListAutomatically fetches the associated Tag tags of the current page's articles or products, very convenient.
3. Display the list of articles or products under a specific Tag tag
When a user clicks on a Tag, it usually jumps to a special page that displays all articles or products with that tag. This page is usually corresponding to the template structure in AnQiCMS.tag/list.html. We need to use it to display content on this pagetagDataList.
At the same time, in order to make this page more perfect, we will also usetagDetailTag to get the detailed information of the current tag (such as title, description), as well aspaginationTag to handle the pagination display of content.
Before yourtag/list.htmlIn the template, you can build 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 archivesUsed to get the list of articles or products associated with the current tag.type="page"Means enabling pagination feature.limit="10"Sets the display of 10 items per page.{{item.Link}}/{{item.Title}}/{{item.Thumb}}and{{item.Description}}Correspond to the link, title, thumbnail and introduction of the content item.{% empty %}The block 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 hint
To make the above code run correctly on your website, you need to ensure that there is a corresponding Tag tag template file in your theme template. Usually:
/template/您的主题目录/tag/index.html: Can be used as an overview page for all tags./template/您的主题目录/tag/list.html: Used to display the content list under a specific tag.
In addition, AnQiCMS supports static 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 improve the SEO performance of the tag page.
Summary
The Tag label feature of AnQi CMS not only provides a flexible content organization method, but also enables content operators to easily display a diverse list of labels on the front end with powerful template tags.Whether it is to build a hot tag cloud, display related tags of articles, or create a tag aggregation page, AnQiCMS can provide intuitive and efficient solutions.Mastering the use of these tags will make your website content more structured, easier for users to explore, and thus improve the overall user experience and SEO effectiveness.
Frequently Asked 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. Categories (Category) usually represent the content of the websiteoutline or thematic structure，has a hierarchical relationship, for example, "news", "products", "tutorials", etc., each article generally belongs to only one main category. While Tag tags are more focused on the content of thespecific keywords, features or topicsCan cross categories, an article can have multiple Tag tags.For example, an article about 'AnQi CMS installation tutorial' can belong to the 'Tutorial' category, and can also be tagged with 'Installation', 'Go language', 'CMS', 'Deployment', and other tags.When making a selection, if the content is structurally belong, tend to use classification;If it is a keyword or a topic related across domains, it is more suitable to use Tag tags.
2. How to make the URL of the Tag tag page more SEO-friendly?
AnQiCMS supports default pseudo-static URLs, which is very important for the SEO of Tag tag pages. You can find it in the background of the “