How to get and display the 'index letter' of the `tagDetail` tag?

As an expert in the essence of AnQiCMS operation, I know that in content management, how to flexibly and efficiently display information is the key to improving user experience and SEO performance. Today, let's delve into a seemingly trivial but extremely practical feature - how to usetagDetailLabel acquisition and display of the "index letter" of Tag in AnQiCMS.

Accurate positioning: In AnQiCMS.tagDetailHow to acquire and display the "index letter" of Tag?

In AnQi CMS, tags (Tag) are an important tool for content organization and association, they help us classify content in multiple dimensions, facilitate user search, and optimize the search engine crawling logic.Each tag, in addition to having 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 by the first letter, greatly enhancing the navigation and user experience of the website.

Then, how should we operate when we need to display the index letter of a specific Tag on the website front-end? AnQiCMS template system providestagDetailThe label allows us to accurately obtain various details of a single Tag, including today's main character - 'Index Letter'.

UnderstandingtagDetailThe core function of the tag

tagDetailThe primary function of a tag is to retrieve detailed data for a specified tag. Whether you are currently on a tag detail page and need to automatically read the information of the current tag, or you want to call the details of a specific tag on other pages,tagDetailCan handle everything. Its basic usage format is:

{% tagDetail 变量名称 with name="字段名称" id="标签ID" %}

There are several key parameters:

• 变量名称: You can optionally assign the obtained Tag information to a variable for multiple references in the template.If the variable name is not specified, the tag will output the field content directly.
• name: This is the most critical parameter, which determines which specific field of Tag you want to obtain, for exampleTitle(Title),Description(Description),Link(link) and so on. And the field name corresponding to the "index letter" we are going to get today 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,tagDetailIt will intelligently read the Tag ID of the current page. But if you need to specify a specific ID Tag, such as a Tag with ID 1, you can useid="1".tokenThis refers to the URL alias of the Tag.

Get and display the 'index letter' of the Tag.

Now, let's focus on how to go through.tagDetailLabel acquisition and display of the specific operation of the 'index letter' of Tag. The key is to usename="FirstLetter"this parameter.

1. Automatically acquire the index letter on the Tag detail page

When a user visits a label's detail page (for example/tag/anqicms.html), we usually want to display the first letter of the label in the page title or other prominent positions. At this point,tagDetailThe tag will automatically identify the Tag ID of the current page, you do not need to specify it manually.

You can directly call it in the template like this:

<div>当前标签的索引字母是：{% tagDetail with name="FirstLetter" %}</div>

Or, to improve the clarity and reusability of the code, we recommend assigning the result to a variable:

{% tagDetail currentTagFirstLetter with name="FirstLetter" %}
<div>当前标签的索引字母是：{{ currentTagFirstLetter }}</div>

Thus,currentTagFirstLetterThe variable stores the current tag index letter, you can use it at any position in the template.

2. Get the index letter of the specified Tag

If you want to display the index letter of a specific Tag on non-Tag detail pages of a website, such as the homepage or other document lists, you need toidortokenThe 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>

Likewise, if you know the URL alias (token) of Tag, you can also retrieve it in this way:

{% tagDetail specificTagFirstLetter with name="FirstLetter" token="anqicms" %}
<div>URL别名为“anqicms”的标签索引字母是：{{ specificTagFirstLetter }}</div>

Actual application scenarios and integration examples

The 'index letter' 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.Although constructing a complete A-Z navigation may require combiningtagListThe tag loops through all tags and sorts them byFirstLetterGroup, buttagDetailProvides the ability to obtain the first letter of a single tag, providing data support for more complex layouts.

This is a more complete example showing how to obtain and display the name, index letter, and link on the Tag detail page, and make some basic judgments:

”`twig {# Assuming we are on a Tag details page #}

{# Retrieve the current Tag's ID for later reference #} {% tagDetail currentTagId with name=“Id” %}

{% if currentTagId %} {# Ensure that the current Tag ID exists to avoid errors when there is no data #}

{# 获取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