In a content management system, tags (Tag) are an important tool for organizing content, enhancing user experience, and optimizing search engine rankings.AnQiCMS as an efficient enterprise-level content management system, naturally also provides powerful and flexible features for tag management.As a senior website operations expert, I know that it is crucial to flexibly apply these functions to the front-end display for the usability and SEO of the website.Today, let's delve into how to accurately display the name, description, and link of a single tag in AnQiCMS templates.
Understanding the Tag mechanism in AnQiCMS
When accessing the detail page of a tag, we usually hope to clearly see the name of this tag, understand its background description, and obtain its standard link address for sharing or further SEO optimization.This provides special template tags for AnQiCMS, making these operations intuitive and efficient.
核心操作：利用 EnglishtagDetail标签展示标签详情 English
要在AnQiCMS的模板中展示单个标签的名称、描述和链接，最核心的工具就是 EnglishtagDetailLabel. This label is specifically used to retrieve the details of the current visited, or a specific tag specified by ID/alias.
tagDetailThe basic usage of the label is very concise:
{% tagDetail 变量名称 with name="字段名称" id="标签ID" %}
Among them,变量名称Is a local variable name that you customize for the label information obtained in the template,nameThe parameter specifies the specific field you want to obtain (such as name, link, description, etc.), andidortokenThe parameter is used to explicitly specify which tag's data to retrieve. It is usually on the tag detail page (usuallytag/detail.htmlortag_list.htmlThis template), AnQiCMS will intelligently identify the tag ID of the current page, so you usually do not need to specify it manuallyidortokenParameter.
Next, we will reveal step by step how totagDetailLabel, extract and display the core information of the label.
1. Display the label name
The label name is the first impression of users identifying and understanding the label content. In AnQiCMS, the label name corresponds toTitleField. You can easily display it in the template in the following ways:
{# 假设您在标签详情页，会自动获取当前标签的Title #}
<h1>{% tagDetail with name="Title" %}</h1>
{# 如果您想获取指定ID标签的名称，并将其赋值给一个变量： #}
{% tagDetail myTagTitle with name="Title" id="123" %}
<p>标签名称：{{ myTagTitle }}</p>
In actual application,h1Tags are usually the choices to display the core title of the page, which is both semantic and beneficial for SEO.
2. Display Tag Description
Tag description provides more background information or content summary for the tag. AnQiCMS provides two fields to carry the description information:Description(通常是简短的摘要) andContent(可以包含更丰富的图文内容)。您可以根据需求选择合适的字段进行展示。
展示简短描述 (Description):
{# 在标签详情页，获取当前标签的Description #}
<p class="tag-description">{% tagDetail with name="Description" %}</p>
{# 或者获取指定ID标签的描述并赋值： #}
{% tagDetail myTagDesc with name="Description" id="123" %}
<p>标签简介：{{ myTagDesc }}</p>
Display detailed content (Content):
If your tag has a more detailed picture and text introduction maintained in the background, you can useContentfield. It is worth noting that,ContentThe field may contain HTML content, so it usually needs to be accompanied bysafeFilter to ensure HTML is rendered correctly rather than being escaped. If the content is in Markdown format, you can also userenderby the filter.
{# 获取当前标签的详细内容，并安全渲染HTML #}
<div class="tag-full-content">
{% tagDetail myTagContent with name="Content" render=true %}
{{ myTagContent|safe }}
</div>
Passrender=true参数，AnQiCMS will first convert Markdown content to HTML, then|safeoutput it safely through a filter.
3. Display tag links
The label link is the unique access address for the label detail page, which is crucial for SEO and user navigation. In AnQiCMS, the label link corresponds toLinkfield.
{# 获取当前标签的链接 #}
<p>标签链接：<a href="{% tagDetail with name="Link" %}">查看此标签</a></p>
{# 如果您想获取指定ID标签的链接，并将其赋值给一个变量： #}
{% tagDetail myTagLink with name="Link" id="123" %}
<p>或者直接跳转到：<a href="{{ myTagLink }}">指定标签页面</a></p>
At any location on the website, once you get the tag,Linkyou can conveniently guide users to their detail pages.
4. Other useful information display
In addition to the name, description, and link,tagDetailLabels can also help you get other useful information, such as:
- Label ID (
Id):{% tagDetail with name="Id" %}, commonly used for debugging or internal logic judgment. - Label index letter (
FirstLetter):{% tagDetail with name="FirstLetter" %}In some alphabetical tag clouds may be used. - Tag Logo (
Logo):{% tagDetail with name="Logo" %}If a special icon or image is uploaded for the tag, it can be used as the visual identifier of the tag.
Integration example: Build a label detail page
Suppose we are building a template for a label detail page (for exampletemplate/default/tag/detail.html) A comprehensive code snippet displaying the above information might look like this:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
{# 设置页面的TDK信息，确保SEO友好 #}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
<link rel="canonical" href="{% tdk with name="CanonicalUrl" %}" />
{# 其他CSS和JS引入 #}
</head>
<body>
<header>
{# 网站导航、Logo等 #}
</header>
<main class="container">
{# 面包屑导航，帮助用户了解当前位置 #}
{% breadcrumb crumbs %}
<nav class="breadcrumb">
{% for item in crumbs %}
<a href="{{ item.Link }}">{{ item.Name }}</a>
{% if not forloop.Last %}>{% endif %}
{% endfor %}
</nav>
{% endbreadcrumb %}
<article class="tag-detail-page">
{# 标签Logo，如果存在的话 #}
{% tagDetail currentTagLogo with name="Logo" %}
{% if currentTagLogo %}
<img src="{{ currentTagLogo }}" alt="{% tagDetail with name="Title" %}" class="tag-logo">
{% endif %}
{# 标签名称 #}
<h1>标签：{% tagDetail with name="Title" %}</h1>
{# 标签简短描述 #}
{% tagDetail currentTagDescription with name="Description" %}
{% if currentTagDescription %}
<p class="tag-intro">{{ currentTagDescription }}</p>
{% endif %}
{# 标签的详细内容（如果存在） #}
{% tagDetail currentTagContent with name="Content" render=true %}
{% if currentTagContent %}
<div class="tag-full-description">
<h2>关于“{% tagDetail with name="Title" %}”</h2>
{{ currentTagContent|safe }}
</div>
{% endif %}
{# 标签链接（通常用于分享或参考） #}
<p><strong>本标签页面链接：</strong> <a href="{% tagDetail with name="Link" %}" target="_blank">{% tagDetail with name="Link" %}</a></p>
{# 展示与该标签相关的文档列表 #}
<section class="related-archives">
<h2>与“{% tagDetail with name="Title" %}”相关的文章</h2>
{% tagDataList archives with type="page" limit="10" %}
{% if archives %}
<ul>
{% for item in archives %}
<li>
<a href="{{ item.Link }}">
{{ item.Title }}
<time>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
</a>
</li>
{% endfor %}
</ul>
{% pagination pages with show="5" %}
{# 分页代码，省略具体内容 #}
{% endpagination %}
{% else %}
<p>暂无相关文章。</p>
{% endif %}
{% endtagDataList %}
</section>
</article>
</main>
<footer>
{# 网站页脚信息 #}
</footer>
</body>
</html>
This example demonstrates how to effectively use AnQiCMStagDetailandtagDataListShow the information of each tag in a clear, complete, and SEO-compliant manner.By using these tag parameters flexibly, you can create a feature-rich and user-friendly tag page.
Common Questions (FAQ)
Q1: I want to display all the associated tags and links of the article on non-label detail pages (such as article detail pages). How should I operate?
A1: In the article detail page, you can usetagListTag to get the list of all tags associated with the current article, and then iterate over these tags to display their names and links. For example:
{% tagList tags with itemId=archive.Id limit="10" %}
<div class="article-tags">
<strong>标签：</strong>
{% for item in tags %}
<a href="{{item.Link}}">{{item.Title}}</a>{% if not forloop.Last %}, {% endif %}
{% endfor %}
</div>
{% endtagList %}