As a website operation expert who deeply understands the essence of AnQiCMS, I know that how to flexibly and efficiently display information is the key to improving user experience and SEO performance. Today, let's delve into a seemingly minor but extremely practical feature - how to usetagDetailLabel acquisition and display of the 'index letter' of Tag in AnQiCMS.
Precise positioning: In AnQiCMStagDetailHow to acquire and display the 'index letter' of Tag?
In AnQi CMS, tags (Tag) are an important tool for content organization and association, helping us to classify content in multiple dimensions, facilitating user search, and optimizing the search engine crawling logic.Each tag, in addition to its own name, description, and link, also has a unique 'index letter'.This index letter is usually used to build letter navigation, allowing users to quickly locate related tags as if looking up a dictionary, greatly enhancing the navigation and user experience of the website.
Then, when we need to display the index letter of a specific Tag on the front end of the website, what should we do? AnQiCMS template system providestagDetailTags, it allows us to accurately obtain various detailed information of a single Tag, including our main character today - "Index Letter".
UnderstandingtagDetailThe core function of the tag
tagDetailThe main function of the label is to obtain detailed data of the specified label. Whether you are currently on a label detail page and need to automatically read the information of the current label, or you want to call the details of a specific label on another page,tagDetailCan be competent. Its basic usage format is:
{% tagDetail 变量名称 with name="字段名称" id="标签ID" %}
Here are some key parameters:
变量名称You can optionally assign the obtained Tag information to a variable for repeated reference in the template.If the variable name is not specified, the label will directly output the field content.name: This is the most core parameter, which determines which specific field of the Tag you want to obtain, for exampleTitle(Title),Description(description),Link(link) etc. And the "index letter" we need to obtain today corresponds to the field name isFirstLetter.idortokenThese two parameters are used to specify which tag information you want to retrieve. If the current page is a Tag detail page, these two parameters are usually omitted.tagDetailWill intelligently read the current page's Tag ID. But if you need to specify a specific ID's Tag, for example, a Tag with ID 1, you can useid="1".tokenThis refers to the Tag's URL alias.
Get and display the 'index letter' of the Tag
Now, we focus on how totagDetailLabel acquisition and display of the specific operation of 'Index Letter' of Tag. The key is to usename="FirstLetter"this parameter.
1. Automatically acquire the index letter in the Tag detail page
When a user visits the detail page of a tag (for example/tag/anqicms.html), we usually want to display the first letter of the tag in the page title or other prominent positions. At this time,tagDetailThe label will automatically identify the Tag ID of the current page, and you do not need to specify it manually.
You can call it in the template directly:
<div>当前标签的索引字母是：{% tagDetail with name="FirstLetter" %}</div>
English translation: Or, for clarity and reusability of the code, we recommend assigning the result to a variable:
{% tagDetail currentTagFirstLetter with name="FirstLetter" %}
<div>当前标签的索引字母是：{{ currentTagFirstLetter }}</div>
This is,currentTagFirstLetterThe variable stores the current index letter of the tag, and you can use it at any position in the template.
2. Get the index letter of a specified Tag
If you want to display the index letter of a specific Tag on non-Tag detail pages of the website, such as the homepage or other document lists, you need to go throughidortokenThe parameter explicitly specifies which Tag.
Assuming you want to get the index letter of the Tag with ID 50:
{% tagDetail specificTagFirstLetter with name="FirstLetter" id="50" %}
<div>ID为50的标签索引字母是：{{ specificTagFirstLetter }}</div>
Similarly, if you know the URL alias (token) of Tag, you can get it like this:
{% tagDetail specificTagFirstLetter with name="FirstLetter" token="anqicms" %}
<div>URL别名为“anqicms”的标签索引字母是：{{ specificTagFirstLetter }}</div>
Actual application scenarios and integration examples
“Index letter” this field has a wide range of applications in actual operation.In addition to being displayed on the Tag detail page, it is also the basic data for building the A-Z tag navigation of the entire site.tagListTag loops through all tags and sorts byFirstLetterGrouping, buttagDetailProvided the ability to get the first letter of a single tag, providing data support for more complex layouts.
The following is a more complete example showing how to obtain and display the name, index letter, and link of a tag on the Tag detail page, and perform some basic judgments:
English
{# Retrieve the ID of the current Tag for later reference #} {% tagDetail currentTagId with name=“Id” %}
{% if currentTagId %} {# Ensure that the current Tag ID exists to avoid errors when no data is present #}
{# 获取Tag名称并赋值给变量 #}
{% tagDetail tagName with name="Title" id=currentTagId %}
{# 获取Tag索引字母并赋值给变量 #}
{% tagDetail tagFirstLetter with name="FirstLetter" id=currentTagId %}
{# 获取Tag链接并赋值给变量 #}
{% tagDetail tagLink with name="Link" id=currentTagId %}
<div class="tag-details-header">
<h1>标签名称：{{ tagName }} <span class="tag-initial">({{ tagFirstLetter }})</span></h1>
<p>该标签的索引字母是 <strong class="highlight-letter">{{ tagFirstLetter }}</strong>。</p>
<p>您可以点击这里查看更多关于 <a href="{{ tagLink }}" title="{{ tagName }}">{{ tagName }}</a> 的内容。</p>
</div>
{# 可以在这里继续调用 tagDataList 来展示该标签下的文档列表 #}
<h3>“{{ tagName }}”相关内容：</h3>
{% tagDataList archives with tagId=currentTagId type="page" limit="10" %}
<ul>
{% for item in archives %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a> - 发布于 {{ stampToDate(item.CreatedTime, "2006-01-02") }}</li>
{% empty %}
<li>当前标签下暂无相关文档。</li>
{% endfor %}
</ul>
{% pagination pages with show="5" %}
{# 分页代码略，参考文档中的pagination