How to display the Tag tags and associated documents on the AnQiCMS front-end page?

In AnQiCMS, effectively utilizing the tag function is a key factor in improving website content organization, optimizing user experience, and enhancing search engine visibility.Tags can not only help users quickly find the content they are interested in, but also provide website administrators with flexible content classification and association methods, breaking through the hierarchical constraints of traditional classification.

AnQiCMS's tag feature is powerful and flexible, allowing content creators to add descriptive keywords or phrases to articles and products.These tags can be conveniently created, edited, and managed in the background admin, and can be easily selected or added when publishing articles.Once the content is tagged, we can use the built-in template tags of AnQiCMS on the front page to accurately display these tags and their associated content.

Display the current article's tags on the article detail page

When a visitor browses a specific article, they usually want to see tags related to the content of the article so that they can further explore content on the same topic. In AnQiCMS, you cantagListThe tag easily achieves this.

This tag is usually used on article detail pages (for examplearchive/detail.htmlOr custom article template), it will intelligently retrieve all the tags associated with the current article.You do not need to manually specify the article ID, as it will be automatically recognized in the context of the article detail page.

For example, if you want to display all related tags below the article content, you can write the template code like this:

{# 假设这是文章详情页模板的一部分 #}
<div class="article-tags">
    <strong>标签：</strong>
    {% tagList tags %} {# 默认获取当前文档的标签 #}
        {% for item in tags %}
            <a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}}</a>
        {% endfor %}
    {% endtagList %}
</div>

This code will traverse all the tags associated with the current article and generate clickable links for each tag, linking to the tag's detail page, making it convenient for users to click and view more related articles.

Create an independent tag list page

To enable users to find all tags on the website, you may need to create a separate tag list page, like a 'tag cloud' or 'tag index'. In AnQiCMS, template files are usually named astag/index.htmlTo bear this kind of page.

On this page, we also usetagListtags, but this time no specific tags are specified.itemIdParameters, so it will retrieve all the tags of the entire website. You can set it as neededlimitParameters to control the number of tags displayed

For example, create a page that displays all tags:

{# tag/index.html 模板文件内容示例 #}
<h1>所有标签</h1>
<div class="tag-cloud">
    {% tagList tags with limit="100" %} {# 获取网站前100个标签 #}
        {% for item in tags %}
            <a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}} ({{item.ArchiveCount}}){# 假设你想显示每个标签的文章数量 #}</a>
        {% endfor %}
    {% endtagList %}
</div>

Hereitem.ArchiveCountalthough intag-archiveTag.mdofitemThe field is not directly listed, but in actual use, many CMS tag objects may contain the number of associated content. If not supported, it can be ignored.Here is an example of how to expand the display information.

Through such a page, users can clearly see all the topics covered by the website and can click to enter the detailed page of a specific tag.

Create tag detail pages and display related articles

When a user clicks on a specific tag (whether from an article detail page or a tag list page), they expect to see the details of the tag as well as all articles associated with the tag. In AnQiCMS, such pages are usually handled bytag/list.htmlThe template file is responsible for rendering.

On this page, we will use two core tags:

1. tagDetailTag: Used to obtain the detailed information of the tag itself on the current page, such as the tag name, description, etc. You do not need to specify the ID, as it will automatically identify the tag ID of the current page.

2. tagDataListTagIt is used to get all articles associated with the current tag. It automatically identifies the page of the current tag.tagIdand can be combined withtype="page"andpaginationtags to implement pagination display of associated articles.

The following is an example of a label detail page template code

`twig {# tag/list.html template file content example #} {% tagDetail currentTag %} {# Get the details of the current tag #}

<h1>标签：{{currentTag.Title}}</h1>
{% if currentTag.Description %}
    <p>描述：{{currentTag.Description}}</p>
{% endif %}

{% endtagDetail %}

<h2>关联文章</h2>
{% tagDataList archives with type="page" limit="10" %} {# 获取当前标签关联的文章，并支持分页 #}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <div class="article-meta">
                <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量：{{item.Views}}</span>
            </div>
        </div>
    {% empty %}
        <p>目前此标签下没有文章。</p>
    {% endfor %}
{% endtagDataList %}

{# 分页导航 #}
<div class="pagination">
    {% pagination pages with show="5" %}
        {# 这里可以根据 tag-pagination.md 中的示例构建分页链接 #}
        {% 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