Master AnQiCMS Tag Management: Filter tags by index letters for smarter and more efficient content navigation

With the continuous growth of website content, Tag (tag) as a flexible content organization method, can effectively link related content, helping users discover more interesting information.However, when the number of your tags reaches a certain scale, how to clearly display these tags on the front end, and avoid users getting lost in the sea of tags, becomes a question worth considering.AnQiCMS provides an elegant solution - by filtering tags by index letters, making your Tag list clear at a glance.

Why do we need to filter Tag by index letters?

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

  • Enhance user experience:Users can quickly locate tags by memory of the first letter, greatly saving search time and making the browsing experience smoother.
  • Optimize website navigation:Structure the tag list to form a clear alphabetical navigation, which is not only aesthetically pleasing 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 the website content, which may improve 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, avoiding the page from becoming too lengthy.

AnQiCMS Tag Basics: 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 are discussing today.For example, you can set the index letter of the "AnQiCMS" tag to "AEnsure that all your tags are configured with the correct index letters, which is the foundation for alphabetical filtering.

How to Implement Index Letter Filtering for Tags in Templates?

The template engine syntax of AnQiCMS is similar to Django, very flexible. To implement filtering Tags by index alphabetically, we need to combine cleverly.tagListTags and some logical judgments.

Firstly, we usually do this on a dedicated page (like)/tag/index.htmlor/tag/list.htmlCome to show all the tags.This page needs to be constructed in two parts: one part is to display the A-Z navigation, and the other part is to show the corresponding tag list based on the currently selected letter.

Step 1: Build 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 ofletterTo 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 create a 'All' button to display all the tags. Then, we go throughmake_listThe filter converts the string “ABCDEFGHIJKLMNOPQRSTUVWXYZ” into a character array and traverses it to generate the letter links A-Z.urlParams.letterWill retrieve the current URLletterthe value of the parameter, if it matches the current iterating letter, we will add a link to that letteractiveclass.

Step two: Display the corresponding Tag list according to the index letter

Below the letter navigation, we need to display the corresponding label based on the letter chosen by the user.tagListA label is provided for 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 label assigns theletterparameter value tocurrent_lettera variable for subsequent use. Next, we use aifstatement to judgecurrent_letterwhether it exists:

  • Ifcurrent_letterExist, we use{% tagList tags with letter=current_letter type="page" limit="20" %}To filter and display the tags under the letter.
  • Ifcurrent_letterDo not exist (i.e., the user clicked "All" or visited for the first time), then display all tags. `