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

The AnqiCMS provides very flexible and powerful tools for content organization, among which tags (Tag) are a very intuitive and efficient tool.By using labels reasonably, it can not only help us better manage website content, but also significantly improve user experience and search engine optimization (SEO) effectiveness.Next, let's take a look at how to display the article tag list in Anqi CMS, as well as the related articles under each tag.

Step 1: Manage and create tags in the background

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

When you publish or edit a document, simply enter or select existing tags in the "Tag label" field to associate the document with the corresponding tags.The tag design of Anqi CMS is very flexible, it does not differentiate between content models and categories, which means you can associate documents of different types (such as articles, products) and documents under different categories through the same tag, realizing the integration of cross-content themes.

Step 2: Display the entire site tag list

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

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

Suppose we want to display up to 20 tags in a certain area of the website, and these tags link 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 tagstagsThis is the variable name we give to 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 instead of tags associated with a specific document.

If this list is part of the website "tag homepage" (usually corresponding totag/index.htmla template), and we want the tag itself to support pagination, then we cantagListadd in thetype="page"the parameter and cooperatepaginationthe tag to use:

<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>

Step 3: Display the associated tags of a single article

When a user reads a specific article, we usually want to show the details page of the article (such asarchive/detail.htmlTemplate) Displays tags directly related to the article. This helps users quickly understand the article's theme and find related content.

In this scenario, we still usetagListLabel, but no need to specifyitemIdParameters. The system will automatically identify 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>

In this way, 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 tag is to aggregate related articles under a certain theme to form a content special page.When the user clicks on a tag, they should be able to see a list of all articles with that tag.This usually correspondstag/list.htmlTemplate.

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

The following is intag/list.htmlTemplate showing the example code for displaying a list of articles with specific tags:

`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="