As an experienced CMS website operation personnel for an enterprise, I am well aware of the importance of content tags (Tags) in website content management and SEO optimization.They can not only help us organize content more flexibly and improve user experience, but are also one of the key factors for search engines to understand the structure of website content.Today, I will delve deeply into how to obtain and display detailed information of specific tags in the Anqi CMS template, including tag names, descriptions, index letters, and logos, to achieve a more refined frontend display.
Understand the tags (Tag) in AnQi CMS
In Anqi CMS, tags are a powerful and flexible content association tool.Tags are not divided by categories or levels, and a tag can be applied to documents of different content models at the same time.For example, an article about 'AnQi CMS tutorial' and a 'website service' product can both be tagged with the 'SEO' tag.This makes the horizontal association between content more close, providing users with a multi-dimensional content discovery path.
AnQi CMS stores rich metadata for each tag to enable diverse display on the front end. This includes core information such as:
- Tag Name (Title): The tag name visible to users.
- Tag Description (Description): A brief description of the tag content, helpful for SEO.
- Index Letter (FirstLetter): Usually the first letter of the tag name, used for alphabetical sorting or navigation.
- Custom URL: Used for pseudo-static and URL optimization.
- SEO title and keywords: Further optimize the tag page for search engine performance.
- Tag Logo/Photo: Provide visual identification for the tag.
Get detailed information about a single tag:tagDetailTag
When we need to display the label details page (such as/tag/SEO.html) or any place where specific label details need to be displayed,tagDetailThe template tag is our preferred tool. It helps us accurately obtain the properties of the specified tag.
tagDetailThe label usage is{% tagDetail 变量名称 with name="字段名称" id="1" %}. Among them,变量名称Can be omitted, if omitted, the field value will be output directly; if a variable name is specified, the obtained value can be stored in the variable for subsequent use.
tagDetailSupport the following main parameters to specify the target tag:
id: Specify through the unique ID of the tag.token: Specify through the URL alias (custom URL) of the tag.siteIdIn a multi-site environment, if you need to retrieve data from other sites, you can specify the site ID.
Here is a specific example of how to obtain detailed information about the label tags.
Get Label Name (Title)
ByTitleField, we can get the user-friendly name of the label.
{# 默认用法，自动获取当前页面Tag的名称 #}
<div>标签名称：{% tagDetail with name="Title" %}</div>
{# 获取ID为1的标签名称 #}
<div>标签名称：{% tagDetail with name="Title" id="1" %}</div>
{# 将标签名称赋值给变量并使用 #}
{% tagDetail tagName with name="Title" %}
<div>当前标签名为：{{tagName}}</div>
Get Label Description (Description)
DescriptionThe field is used to obtain the detailed introduction of the label, which is crucial for enriching the page content and SEO.
{# 默认用法，自动获取当前页面Tag的描述 #}
<div>标签描述：{% tagDetail with name="Description" %}</div>
{# 获取URL别名为"golang"的标签描述 #}
<div>标签描述：{% tagDetail with name="Description" token="golang" %}</div>
{# 将标签描述赋值给变量并使用 #}
{% tagDetail tagDescription with name="Description" %}
<div>当前标签描述为：{{tagDescription}}</div>
Get the label index letter (FirstLetter)
FirstLetterThe field can obtain the first letter of the tag name, commonly used for sorting the tag list in alphabetical order.
{# 默认用法，自动获取当前页面Tag的索引字母 #}
<div>标签索引字母：{% tagDetail with name="FirstLetter" %}</div>
{# 获取ID为5的标签索引字母 #}
<div>标签索引字母：{% tagDetail with name="FirstLetter" id="5" %}</div>
{# 将索引字母赋值给变量并使用 #}
{% tagDetail tagInitial with name="FirstLetter" %}
<div>当前标签首字母为：{{tagInitial}}</div>
Get the tag logo/image (Logo)
If the tag is configured with a Logo or thumbnail, we can useLogoto obtain the image URL for visual display.
{# 默认用法，自动获取当前页面Tag的Logo #}
<div>标签Logo：<img src="{% tagDetail with name="Logo" %}" alt="{% tagDetail with name="Title" %}" /></div>
{# 获取URL别名为"anqicms"的标签Logo #}
<div>标签Logo：<img src="{% tagDetail with name="Logo" token="anqicms" %}" alt="安企CMS标签" /></div>
{# 将Logo地址赋值给变量并使用 #}
{% tagDetail tagLogo with name="Logo" %}
<div>当前标签Logo：<img src="{{tagLogo}}" alt="标签图片" /></div>
to get the tag list information:tagListTag
In addition to obtaining detailed information about a single tag, we often need to display a list of tags, such as displaying related tags at the bottom of an article detail page, or showing popular tags in the sidebar.tagListLabels are designed for this purpose.
tagListThe label usage is{% tagList 变量名 with limit="10" %}It will return an array of labels, and we need to iterate through them to display the details of each label.forLoop to traverse and display the details of each label.
tagListSupport the following main parameters to filter and sort tags:
itemId: Specify the document ID to get the tags associated with the document. If not specified, the ID of the current document is read by default; if set to0If not read, the current document ID is used to get all tags.limit: Limits the number of returned tags.letter: Filters by index letter (A-Z).categoryIdFilter by category ID to get the tags associated with the documents under this category.siteIdIn a multi-site environment, if you need to retrieve data from other sites, you can specify the site ID.
IntagListofforIn the loop, eachitemContainsId/Title/Link/DescriptionandFirstLetterfields.
Example: Display related tags on the article detail page.
<div>
<h4>本文相关标签：</h4>
{% tagList tags with itemId=archive.Id limit="10" %}
{% for item in tags %}
<a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
</div>
Example: Display all tags and sort them alphabetically by index (pseudo-code, needs further implementation on the front-end)
<div class="tag-cloud">
{% tagList allTags with limit="50" %} {# 获取前50个标签 #}
{% for item in allTags %}
<a href="{{item.Link}}" title="{{item.Description}}">{{item.Title}} ({{item.FirstLetter}})</a>
{% endfor %}
{% endtagList %}
</div>
Tag document list: tagDataListTag
Although this does not directly obtain the detailed information of the label itself, it is worth mentioning for the completeness of the contenttagDataListTag. It is used to retrieve the list of all documents under a specified tag, usually on the tag detail page (such as/tag/SEO.html) and combined with pagination functionality to display all content related to the tag.
{# 假设在标签详情页，会自动获取当前TagID #}
<div>
<h3>标签“{% tagDetail with name="Title" %}”下的文章：</h3>
{% tagDataList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="archive-item">
<a href="{{item.Link}}">
<h4>{{item.Title}}</h4>
<p>{{item.Description}}</p>
</a>
<span>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</div>
{% empty %}
<p>该标签下暂无内容。</p>
{% endfor %}
{% endtagDataList %}
{# 结合分页标签 #}
{% pagination pages with show="5" %}
{# 分页HTML结构 #}
{% endpagination %}
</div>
Application in practice and **practice
- Tab page optimizationUtilize
tagDetailObtained tag name, description, Logo information, etc., can generate a rich dedicated page for each tag to enhance user experience and search engine optimization. For example, on the tag page,titleandmeta descriptionTags dynamically insertedTitleandDescription. - Content related: Use in article or product detail pages,
tagListDisplay related tags to guide users to discover more content on the same topic and reduce bounce rate. - Sidebar / bottom recommendation: Pass
tagListCombinelimitParameters, display popular or latest tags in the website sidebar or footer, increase the internal link structure of the website, which is helpful for SEO. - Maintain data consistency: The logo or image of the tag should be uploaded and maintained in the background "Document Tag Management" to ensure that the image called by the front-end is the latest and correct.
By flexibly using these tags provided by Anqi CMS, we can achieve rich display of tag information and intelligent association between content with the least effort, thus optimizing the content structure of the website, enhancing user satisfaction and search engine rankings.
Frequently Asked Questions (FAQ)
1. I used in the template.tagDetailWhy does it not display any information, but it is a tag?
First, make sure that the page you are currently visiting is indeed a tag detail page, or you aretagDetailthe tag throughidortokenThe parameter specified an existing tag ID or URL alias. If the tag ID or URL alias does not exist, or there is no available tag information in the current page context, thentagDetailThe tag cannot retrieve data. Also, checknameIs the attribute spelled correctly, for exampleTitleinstead oftitle.
2. How totagListOnly the tags associated with documents under a specific category are displayed?
You can usetagListlabel'scategoryIdParameter to implement. For example, if you want to display the tags associated with the article of category ID 10, you can write it like this:{% tagList tags with categoryId="10" limit="10" %}. This will filter out the tags associated with the documents under the category.
3. I uploaded the logo image of the tag, but it did not display on the front end. How should I check it?
Please first confirm that the Logo field of the document tag management in the Anqi CMS backend has been correctly uploaded and saved. Next, check the call in your template.LogoThe code of the field is correct, for example{% tagDetail with name="Logo" %}. Finally, ensure that the logo image file itself is accessible and is not affected by CDN or browser cache issues. Try clearing the website and browser caches.