In a content management system, tags (Tag) are an important tool for organizing content, improving user experience, and optimizing search engine rankings.AnQiCMS as an efficient enterprise-level content management system naturally provides powerful and flexible tag management functions.As an experienced 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 the AnQiCMS template.
Understand the tag mechanism in AnQiCMS
In AnQiCMS, tags are not just simple keyword lists at the bottom of articles; they are also a powerful content association mechanism.By the "Content Management" feature under the "Document Tags" function, you can add, manage, and edit tags for various documents on the website.Each tag has its own name, index letter, custom URL, SEO title, keywords, and detailed description attributes.This rich information has laid a solid foundation for us to display finely on the front end.
When visiting a tag's detail page, we usually hope to clearly see the name of the tag, understand its background description, and obtain its standard link address for sharing or further SEO optimization.AnQiCMS provides special template tags for this, making these operations intuitive and efficient.
Core operation: usetagDetailTag display tag details
The most core tool to display the name, description, and link of a single tag in the AnQiCMS template istagDetailThis tag is specifically used to retrieve the details of the current visited tag, or a tag specified by ID/alias.
tagDetailThe basic usage of the tag is very simple:
{% tagDetail 变量名称 with name="字段名称" id="标签ID" %}
Among them,变量名称Is a local variable name you define for the label information obtained in the template,nameThe parameter specifies the specific fields you want to retrieve (such as name, link, description, etc.), andidortokenParameters are used to explicitly specify which label's data to retrieve. It is typically on the label detail page (usuallytag/detail.htmlortag_list.htmlThis kind of 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 totagDetailTag, extract and display the core information of the tag.
1. Display the tag name
The label name is the first impression of users in identifying and understanding the label content. In AnQiCMS, the label name corresponds toTitlefield. You can easily display it in the template:
{# 假设您在标签详情页，会自动获取当前标签的Title #}
<h1>{% tagDetail with name="Title" %}</h1>
{# 如果您想获取指定ID标签的名称，并将其赋值给一个变量： #}
{% tagDetail myTagTitle with name="Title" id="123" %}
<p>标签名称：{{ myTagTitle }}</p>
In practical applications,h1Tags are usually the **choice to display the core title of the page, which is both semantically correct and beneficial for SEO.
2. Display tag description
The tag description provides users with more background information or content summary about the tag. AnQiCMS provides two fields to carry the description information:Description(usually a brief summary) andContent(can contain more rich text and images). You can choose the appropriate field for display according to your needs.
Display a brief description (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, and therefore usually needs to be matched withsafeA filter to ensure that HTML is rendered correctly rather than being escaped. If the content is in Markdown format, you can also userenderthe filter to convert.
{# 获取当前标签的详细内容，并安全渲染HTML #}
<div class="tag-full-content">
{% tagDetail myTagContent with name="Content" render=true %}
{{ myTagContent|safe }}
</div>
Byrender=trueParameter, AnQiCMS will first convert Markdown content to HTML, then through|safefilter for safe output.
3. Display tag links
The label link is the unique access address of 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'sLink, it can conveniently guide users to the detail page.
4. Display of other useful information
In addition to names, descriptions, and links,tagDetailLabels can also help you obtain other useful information, such as:
- Tag ID (
Id):{% tagDetail with name="Id" %}Commonly used for debugging or internal logic judgments. - Label index letter (
FirstLetter):{% tagDetail with name="FirstLetter" %}May be used in some alphabetical tag clouds. - Label Logo (
Logo):{% tagDetail with name="Logo" %}If a special icon or image is uploaded for the label, it can be used as the visual identifier of the label.
Integration Example: Build a label detail page
Assuming we are building a label detail page template (for exampletemplate/default/tag/detail.html), a comprehensive code snippet that displays 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 utilize in AnQiCMStagDetailandtagDataListLabels, displayed in a clear, complete, and SEO-compliant manner to show the information of each individual label.By flexibly using these tag parameters, you can create a feature-rich, user-friendly tag page.
Frequently Asked Questions (FAQ)
Q1: I want to display all the names and links of the associated tags on non-label detail pages (such as article detail pages), what should I do?
A1: In the article detail page, you can usetagListTag to get the list of all tags associated with the current article, then iterate through 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 %}