How to display the AnqiCMS document Tag list on the front page and support filtering by letter or category?

In a content management system, a tag (Tag) is a powerful tool that helps us organize content more flexibly and improve the efficiency of users in finding relevant information.AnQiCMS as an efficient enterprise-level content management system naturally also deeply integrates powerful tag functions.If you are hoping to display a list of document tags on the front end of your website and allow users to filter by letter or category, this article will provide you with a comprehensive guide.

The tagging mechanism of AnQiCMS

AnQiCMS treats tags as independent content entities, which is different from the traditional 'keyword' concept.In the background, you can set a unique name, index letter, even define a custom URL alias and SEO information for each tag, which greatly enhances the independence and SEO-friendliness of the tag.It is also worth mentioning that the tags of AnQiCMS are generic across models, which means the same tag can be associated with documents under different content models (such as articles, products), providing great flexibility for content association.These tags have been fully introduced in AnQiCMS V2.1.0 and continue to be optimized.

Display all tag lists on the front page

To display all the tags on the website, we usually have a dedicated page, such as the website's 'Tag Homepage' to present them. According to AnQiCMS template design conventions, the corresponding template file for this page is typically located in the template directory you are currently using.tag/index.html.

in thistag/index.htmlIn the template file, we can usetagListtags to get all the tag data. To better manage and display a large number of tags, we usually use the pagination feature together:

{# /template/{你的模板目录}/tag/index.html #}

{# 获取所有标签并分页展示，每页显示20个 #}
{% tagList tags with type="page" limit="20" %}
    <div class="tag-list-container">
        {% for item in tags %}
            <a href="{{item.Link}}" class="tag-item">
                {{item.Title}} <span class="tag-count">({{item.ArchiveCount}})</span>
            </a>
        {% empty %}
            <p>目前还没有任何标签。</p>
        {% endfor %}
    </div>

    {# 引入分页组件，显示5个页码按钮 #}
    {% pagination pages with show="5" %}
        <div class="pagination-nav">
            {% if pages.FirstPage %}
                <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
            {% endif %}
            {% if pages.PrevPage %}
                <a class="page-link" href="{{pages.PrevPage.Link}}">上一页</a>
            {% endif %}
            {% for pageItem in pages.Pages %}
                <a class="page-link {% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}
                <a class="page-link" href="{{pages.NextPage.Link}}">下一页</a>
            {% endif %}
            {% if pages.LastPage %}
                <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
            {% endif %}
        </div>
    {% endpagination %}
{% endtagList %}

In the code above, we go throughtagList tags with type="page" limit="20"Gained all tags and specified the pagination mode and number of items per page.item.LinkWill automatically generate the URL for the tag detail page.item.TitleIs the display name of the tag, anditem.ArchiveCountThe number of documents associated with the label can be displayed subsequently.paginationThe label is responsible for rendering the standard pagination navigation.

Supports sorting tags by letter.

To facilitate users' quick location of tags, sorting by alphabet is a very practical feature. We can add a letter navigation bar at the top oftag/index.htmlthe page.

Firstly, we need to generate A-Z letter links. AnQiCMS's template engine supports some filters to assist us in completing this task. We can usemake_listThe filter splits a string into a character array, then traverses to generate links:

{# 继续在 /template/{你的模板目录}/tag/index.html 文件中 #}

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

{# 接着是上面的 tagList 和 pagination 代码 #}
{% tagList tags with type="page" limit="20" letter=urlParams.letter %}
    {# ... 标签列表和分页代码 ... #}
{% endtagList %}

Here, we useurlParams.letterto get the parameter value in the current URL.letterIf it exists, we will pass it tourlParams.letter.tagListlabel'sletterParameters, in this waytagListIt will only return tags that start with the letter.make_listThe filter can convert the string "ABCDEFGHIJKLMNOPQRSTUVWXYZ" into an iterable list of characters.

Supports filtering tags by category

We can also filter by the category of the tags in addition to filtering by alphabet.Although the tags of AnQiCMS itself do not belong directly to any category, the documents belong to categories, and the tags are associated with the documents.Therefore, the "Filter by category" here usually refers to filtering out tags related to documents under a certain category.

To implement this feature, we first need to obtain the website category list, which can be done bycategoryListtags. Then, generate a filter link for each category and select thecategoryIdpass totagListTags:

{# 继续在 /template/{你的模板目录}/tag/index.html 文件中 #}

<div class="category-filter">
    <a href="/tags" class="category-item {% if not urlParams.categoryId %}active{% endif %}">所有分类</a>
    {% categoryList categories with moduleId="1" parentId="0" %} {# 假设这里筛选文章模型的顶级分类 #}
        {% for category in categories %}
            <a href="/tags?categoryId={{category.Id}}" class="category-item {% if urlParams.categoryId|integer == category.Id %}active{% endif %}">{{category.Title}}</a>
        {% endfor %}
    {% endcategoryList %}
</div>

{# 接着是上面的 alphabet-filter, tagList 和 pagination 代码 #}
{% tagList tags with type="page" limit="20" letter=urlParams.letter categoryId=urlParams.categoryId|integer %}
    {# ... 标签列表和分页代码 ... #}
{% endtagList %}

In this example, we usecategoryListtags to get the top-level categories under the article model.urlParams.categoryIdto get the category ID parameter in the URL. Please note,urlParams.categoryId|integerThe filter converts URL parameters to integer type to ensurecategory.Idcorrect comparison. When the user clicks on a category link,tagListThe label will be based oncategoryIdParameters to display the tags associated with the documents under the category.

Tag details page: Display the document list under a specific tag.

When a user clicks on a tag, they will usually enter the detail page of the tag, displaying all documents associated with this tag. According to the template design convention of AnQiCMS, the corresponding template file of this page is usuallytag/list.html.

Intag/list.htmlIn the template, we can usetagDetailtags to get the details of the current tag, as well astagDataListtags to get the list of all documents under the tag.

”`twig {# /template/{your template directory}/tag/list.html #}

{# Get the details of the current tag #} {% tagDetail currentTag with name=“Title” %}

<h1>标签: {{currentTag}}</h1>
<p>{% tagDetail with name="Description" %}</p>

{% endtagDetail %}

{# Retrieve the document list under the current tag and display it with pagination #} {% tagDataList archives with type