How to filter and display the Tag list based on index letters in AnQiCMS template?

Hello, users of AnQiCMS! As an experienced website operation expert, I know that in today's increasingly rich content, how to efficiently manage and display content is the key to improving user experience and optimizing SEO.Today, let's talk about a very practical feature in AnQiCMS: how to filter and display the Tag list in templates based on index letters, making your website content navigation smarter and more convenient.

Master AnQiCMS Tag Management: Filter tags by index alphabetically to make content navigation smarter and more efficient

As the content of the website grows continuously, Tag (tag) as a flexible content organization method can effectively link related content together, helping users discover more information of interest.However, when the number of your tags reaches a certain scale, how to clearly display these tags on the front end to avoid users getting lost in a sea of tags has become a question worth pondering.AnQiCMS provides an elegant solution-by using index letters to filter tags, making your Tag list clear at a glance.

Why do we need to filter Tag by index alphabetically?

Imagine a website with hundreds or even thousands of tags. If all tags were simply piled together, it would be very difficult for users to find tags of a specific topic. Sorting by index letters is like creating a 'alphabetical index dictionary' for your tag library, which brings many obvious advantages:

• Improve user experience:Users can quickly locate tags based on the first letter of their memory, greatly saving search time and making the browsing experience smoother.
• Optimize website navigation:Structure the tag list to form a clear letter navigation, which is not only aesthetic but also conforms to the habits of users reading traditional dictionaries, reducing the cost of learning.
• Improve SEO performance:A clear structure and friendly navigation path helps search engines better crawl and understand website content, thereby potentially improving the ranking of relevant keywords.
• Manage large-scale tags:For websites with a large amount of content, this filtering method is an effective strategy for managing and displaying tags, to avoid the page being too long.

Basic Tag in AnQiCMS: Understanding Index Letters

In the AnQiCMS backend, when creating or editing document tags, you will find a field named "Index Letter".This is a very critical setting that allows you to specify an uppercase English letter (A-Z) for each tag.This letter is the basis for the filtering logic we discussed today.For example, you can set the index letter of the "AnQiCMS" tag to "A", and "Go language" to "G".Ensure that your tags are configured with the correct index letters, which is the basis for sorting by letter.

How to implement tag filtering by index letter in the template?

AnQiCMS's template engine syntax is similar to Django, very flexible. To implement filtering tags by index letter, we need to skillfully combinetagListLabel and some logical judgment.

Firstly, we usually have a dedicated page (such as)/tag/index.htmlor/tag/list.html) To display all the tags. This page needs to be built in two parts: one part is to display the A-Z navigation, and the other part is to display the corresponding tag list based on the currently selected letter.

Step one: Build the letter navigation guide

We can generate a list of letters from A to Z at the top of the page. Here we can use a loop, combined with the current URL in theletterParameters to determine which letter is selected, and to add an "active" state to it (such as highlighting).

<div class="tag-index-letters">
    <a href="/tags" class="{% if not urlParams.letter %}active{% endif %}">全部</a>
    {% set alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"|make_list %}
    {% for char in alphabet %}
        <a href="/tags?letter={{ char }}" class="{% if urlParams.letter == char %}active{% endif %}">{{ char }}</a>
    {% endfor %}
</div>

In this code, we first created a "All" button to display all the tags. Then, we usemake_listThe filter converts the string “ABCDEFGHIJKLMNOPQRSTUVWXYZ” into a character array and traverses it to generate the letter link A-Z.urlParams.letterIt will retrieve the value of the current URL inletterIf the parameter value matches the current traversed letter, we will add a link to that letteractiveClass.

Second step: Display the corresponding Tag list based on the index letter

Under the letter navigation, we need to display the corresponding tags based on the letter selected by the user.tagListTags provide this.letterParameter.

<div class="tag-list-display">
    {% set current_letter = urlParams.letter %}
    
    {% if current_letter %}
        <h2>标签（{{ current_letter }}）</h2>
        {% tagList tags with letter=current_letter type="page" limit="20" %}
    {% else %}
        <h2>所有标签</h2>
        {% tagList tags with type="page" limit="20" %}
    {% endif %}

    <ul>
        {% for item in tags %}
            <li>
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                <span>({{ item.FirstLetter }})</span>
            </li>
        {% empty %}
            <li>当前字母下没有找到任何标签。</li>
        {% endfor %}
    </ul>

    {# 标签列表分页显示 #}
    {% if tags %}
    <div class="pagination-wrapper">
        {% pagination pages with show="5" %}
            <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
            {% if pages.PrevPage %}
            <a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
            {% endif %}
            {% for page_item in pages.Pages %}
            <a class="{% if page_item.IsCurrent %}active{% endif %}" href="{{ page_item.Link }}">{{ page_item.Name }}</a>
            {% endfor %}
            {% if pages.NextPage %}
            <a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
            {% endif %}
            <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
        {% endpagination %}
    </div>
    {% endif %}
</div>

In this part of the code, we first usesetThe tag places the URL inletterAssigns the parameter value tocurrent_lettera variable for future use. Next, we check for itsifthe statement to judgecurrent_letterexistence:

• Ifcurrent_letterIf it exists, we use it{% tagList tags with letter=current_letter type="page" limit="20" %}Filter and display the tags under the letter.
• Ifcurrent_letterIf it does not exist (i.e., the user clicked "All" or visited for the first time), then display all tags.