How to display the list of article tags (Tag) and the related articles under each Tag?

Step 1: Create tags in the background management

Before using tags, it is first necessary to ensure that our website content has been properly tagged.In the backend of AnQi CMS, we can find the 'Document Tag' feature under 'Content Management'.Here, you can conveniently add, edit, or delete tags.Each tag can be set to have its name, index letter, custom URL, as well as the title, keywords, and description for SEO.

When you publish or edit a document, just enter or select an existing tag in the 'Tag label' field to associate the document with the corresponding tag.The tag design of AnQi CMS is very flexible, it does not distinguish between content models and categories, which means you can associate documents of different types (such as articles, products) and different categories under the same tag, achieving integration across content themes.

第二步：展示全站标签列表

We often need to display all the popular or important tags on the homepage, sidebar, or a dedicated "tag cloud" page of the website to guide users to discover more interesting content.

To achieve this, we can use the built-in security CMStagListtag. This tag can help us obtain tag data, and then display it through the template loop.

If we want to display up to 20 tags in a certain area of the website and link them to their respective article list pages, we can write the template code like this:

<div class="tag-list-section">
    <h3>热门标签</h3>
    <ul>
        {% tagList tags with limit="20" itemId="0" %}
        {% for item in tags %}
        <li>
            <a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}}</a>
        </li>
        {% endfor %}
        {% empty %}
        <li>暂时没有可显示的标签。</li>
        {% endendtagList %}
    </ul>
</div>

Here,tagListAfter the tagtagsThis is the variable name we use for the tag list data.limit="20"It limits the number of displayed tags.itemId="0"It is a critical parameter that tells the system we want to retrieve all tags, rather than tags associated with a specific document.

If this list is part of the website's “Tags Home Page” (usually correspondingtag/index.htmltemplate), and we want the tags themselves to support pagination, then we cantagListadd tags to ittype="page"parameter andpaginationLabel usage:

<div class="all-tags-page">
    <h1>全部标签</h1>
    {% tagList tags with type="page" limit="50" itemId="0" %}
    <ul>
        {% for item in tags %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
        {% endfor %}
    </ul>
    {% endtagList %}

    {# 分页代码 #}
    <div class="pagination">
        {% pagination pages with show="5" %}
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        {% endpagination %}
    </div>
</div>

Third step: Display the associated tags of a single article

When a user reads a specific article, we usually hope to display the details page of the article (for examplearchive/detail.htmlTemplate) Displays tags directly associated with the article. This helps users quickly understand the topic of the article and find related content.

In this scenario, we still usetagListLabel, but no need to specifyitemIdParameters. The system will automatically recognize that the current page is an article detail page and retrieve the tags associated with the current article:

<article>
    <!-- 文章内容区域 -->
    <div class="article-content">
        <!-- ... 文章标题、正文等 ... -->
    </div>

    <div class="article-tags">
        <strong>相关标签：</strong>
        {% tagList tags %}
        {% for item in tags %}
        <a href="{{item.Link}}" class="tag-item" title="{{item.Title}}">{{item.Title}}</a>
        {% endfor %}
        {% empty %}
        <span>暂无标签</span>
        {% endendtagList %}
    </div>

    <!-- ... 上一篇/下一篇、相关文章等 ... -->
</article>

Through this method, each article will display the tags associated with it below, and clicking will jump to the article list under the tag.

Step 4: Display the article list under a specific tag

The ultimate purpose of the label is to aggregate related articles under a certain theme to form a content special page.When a user clicks on a label, they should be able to see a list of all articles with that label.tag/list.htmltemplates.

To implement the article list under a specific tag, we need to usetagDataListthe tag. This tag is specifically used to retrieve all documents under a specified tag.

the following is intag/list.htmlTemplate for displaying a list of specific tag articles example code:

`twig

{# 获取当前标签的详细信息，例如标题 #}
{% tagDetail currentTag with name="Title" %}
<h1>标签：{{currentTag}}</h1>

<div class="tag-description">
    {# 获取并显示标签的描述信息 #}
    {% tagDetail tagDesc with name="Description" %}
    {% if tagDesc %}
    <p>{{tagDesc}}</p>
    {% endif %}
</div>

<ul class="article-list">
    {% tagDataList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}" class="