As an experienced website operations expert, I am more than happy to delve into the mysteries of the "Index Letter Function" of AnQi CMS and its application in the front-end template.This seemingly simple feature actually contains huge potential for improving user experience, optimizing information architecture, and even helping SEO.

The 'index letter' function of tags: the 'beacon' of content organization in AnQi CMS

In a content management system, tags (Tag) are an important tool for organizing content and establishing associations.AnQi CMS is well-versed in this and has introduced a clever and practical feature - "Index Letters" to document tags.This feature allows you to specify an index for each tag on the website using a letter (A-Z) from 1 to 26.

This feature is not a simple classification, but more like building a 'alphabet navigation tower' for your tagging system.When your website content becomes richer, the number of tags also increases, and users may feel confused in the sea of tags.At this time, the 'index letter' can play its unique guiding role.It allows users to quickly filter out all tags that start with a specific letter, just like looking up a dictionary, greatly improving the efficiency of tag search and the discoverability of content.

Why is the 'Index Letter' feature so important?

From the perspective of content operation and user experience, the index letter feature of tags at least brings the following significant advantages:

  1. Improve user experience and content discoverability:Imagine when your website has hundreds of product tags or industry vocabulary tags, an alphabetically arranged index page can help users quickly locate the keywords they are interested in.For example, if the user wants to find products related to 'Smart Home', they can directly click on 'Z' (or the letter corresponding to the pinyin initial 'Z'), quickly find tags starting with '智' or 'Z', and avoid aimless scrolling or searching.
  2. Optimize information architecture and on-site SEO:The alphabetical index page can be an important hub for internal links on a website.These pages inherently carry clear classification logic, through reasonable link layout, it can enable search engines to better understand the content structure and thematic relevance of your website.When a user enters the tag list page by indexing letters, it not only improves the page click depth but also provides more opportunities for related content to be crawled and indexed.For websites that require a large number of professional terms or product model classification displays, such as e-commerce, B2B corporate websites, or knowledge bases, this feature particularly highlights its SEO value.
  3. Simplify tag management:For website operators, as the scale of content expands, tag management will become more complex.To specify index letters for tags helps to form a more structured tag list in the background management interface, making it convenient for operators to search, edit, and maintain, ensuring the clarity and standardization of the tag system.

How to configure the 'index letters' of tags in the Anqi CMS backend?

This feature's configuration is very intuitive.You just need to log in to the AnQi CMS backend, go to the "Content Management" module under the "Document Tag" management page.When adding or editing any tag, you will see a field named "Index Letter".Here, you can specify a letter from A-Z for this tag.For the "AnQiCMS

Apply the "Index Letter" feature in the front-end template

After understanding the role of index letters, the next step is to巧妙地运用它in your website front-end template, maximizing its value.The powerful template tag system of AnQi CMS makes everything easy.

We will mainly usetagListtags to retrieve and display tags, as well astagDetailtags to retrieve the details of a single tag.

Step one: Create an alphabetical navigation bar

First, you need a letter navigation bar that allows users to click and select different index letters. This navigation bar can iterate through all the letters (A-Z) that may be used.

<div class="tag-index-nav">
    {% set alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"|make_list %}
    {% for char in alphabet %}
        <a href="/tag-archive?letter={{ char|lower }}" {% if urlParams.letter == char|lower %}class="active"{% endif %}>{{ char }}</a>
    {% endfor %}
</div>

In this code, we first usemake_listThe filter created an array containing all uppercase letters from A-Z. Then, we traversed the array to generate a link for each letter. The target page of the link can be/tag-archive(You need to create a tag archive page for this) and throughletterPass the current letter as a parameter.urlParams.letterTo determine if the current page has selected a letter to addactiveStyle.

Step two: Display the tag list based on the index letter

Next, on the tag archive page you created (for example/tag-archiveThe corresponding template filetag/index.htmlortag/list.htmlIn this case, you need to filter and display the tags based on the index letter selected by the user.

Suppose the user clicks on letter "A", the page URL becomes/tag-archive?letter=a. In your template, you can usetagListlabel'sletterParameters to retrieve tags starting with 'A'.

<div class="tag-list-by-letter">
    {% if urlParams.letter %}
        <h2>标签索引：{{ urlParams.letter|upper }}</h2>
        {% tagList tags with letter=urlParams.letter type="page" limit="50" %} {# 获取当前字母的所有标签，并支持分页 #}
            {% if tags %}
                <ul>
                    {% for item in tags %}
                        <li>
                            <a href="{{ item.Link }}">{{ item.Title }}</a>
                            （标签索引字母：{{ item.FirstLetter }}）
                        </li>
                    {% endfor %}
                </ul>
                {# 标签列表的分页导航 #}
                {% pagination pages with show="5" %}
                    {# 这里是分页的HTML结构，与常规文档列表分页类似 #}
                    <ul>
                        {% if pages.PrevPage %}<li class="prev"><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a></li>{% endif %}
                        {% for p in pages.Pages %}<li {% if p.IsCurrent %}class="active"{% endif %}><a href="{{ p.Link }}">{{ p.Name }}</a></li>{% endfor %}
                        {% if pages.NextPage %}<li class="next"><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>{% endif %}
                    </ul>
                {% endpagination %}
            {% else %}
                <p>没有找到以“{{ urlParams.letter|upper }}”开头的标签。</p>
            {% endif %}
        {% endtagList %}
    {% else %}
        <p>请点击上方的字母导航来查看标签。</p>
        {# 也可以在这里显示所有热门标签或者所有标签的简单列表 #}
        {% tagList allTags with limit="100" %}
            <h3>热门标签</h3>
            <ul>
                {% for tag in allTags %}
                    <li><a href="{{ tag.Link }}">{{ tag.Title }}</a></li>
                {% endfor %}
            </ul>
        {% endtagList %}
    {% endif %}
</div>

In this code block:

  • We first judgeurlParams.letterIf it exists, it means the user has selected a specific index letter.
  • tagList tags with letter=urlParams.letterWill automatically according to the URL passed in.letterParameters to filter tags.
  • item.FirstLetterUsed to get the index letter set by the current looped tag, you can optionally display it.
  • type="page"andlimit="50"CombinepaginationTags can implement pagination display of tag lists.

Step 3: Display the index letter on the tag detail page

On the detail page of a single tag (for exampletag/detail.html), you may also want to display the index letter of the tag. In this case, you can usetagDetailTags:

`twig

<h1>{{ tagDetail.Title }}</h1>