How to get and display the list of Tag tags associated with the document in the Anqi CMS?

The Anqi CMS provides a flexible and powerful Tag function in content management, which can not only help you better organize content, but also effectively improve the website's SEO performance and user experience.This article will give a detailed introduction on how to manage and obtain the list of Tag tags associated with documents in the Anqi CMS and display them on the front end of your website.

Backend Tag Management: Effective Classification and Association of Content

In the AnQi CMS, the management of tags is intuitive and convenient.You can find the 'Document Tags' feature under the 'Content Management' menu in the backend.This is where you create, edit, and manage all tags.

When you create a new label, you can set the 'Label Name', which is the text displayed on the front end of the label.To enhance search engine friendliness, you can configure a 'Custom URL' for tags, which will affect the URL structure of the tag page. It is recommended to use meaningful English or pinyin aliases.同时，“SEO标题”、“标签关键词”和“标签简介”等字段允许您为每个标签页进行独立的SEO优化，确保每个标签集合都能被搜索引擎更好地理解和收录。

The strength of the tag lies in its flexibility.When you edit or publish articles, products, and other documents, you will see a 'Tag label' option.Here, you can add one or more tags to the current document.The CMS supports you in selecting existing tags, or you can directly input a new tag name and press the Enter key, and the system will automatically create and associate these new tags.This multi-to-many association allows content to be organized and discovered in more dimensions, for example, an article introducing 'Go language' can be tagged with 'Go language', 'programming', 'backend development', and other tags at the same time, and these tags can also be associated with other related articles.

Front-end Display: Make the tags active

Presenting the backend management tags on the website frontend is the core capability of the Anqi CMS template system. Anqi CMS provides a variety of tags, allowing you to flexibly call them according to different scenarios.

1. Get the tag list of a specific document

On the document detail page, you may want to display all tags associated with the current article or product. At this time,tagListLabels come into play. You can useitemIdparameters to specify which document's label to get, usually on the document details page, thisitemIdwill read the current document's ID by default.

For example, in your article detail template (usually{模型table}/detail.htmlIn English, it can be displayed like this to show the current article's tags:

<div>
    <strong>相关标签：</strong>
    {% tagList tags with itemId=archive.Id limit="10" %}
    {% for item in tags %}
    <a href="{{item.Link}}" class="tag-link">{{item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

In the above code,tagListThe tags will search for the current document(itemId=archive.Id) and assign all related tags totagsa variable.limit="10"Then, it limits the display of up to 10 tags. Next, throughforto iteratetagsEach,itemrepresents a tag, you can use{{item.Link}}to get the link of the tag page, through{{item.Title}}to get the tag name and display it.

2. Show document lists associated with specific tags

When a user clicks on a tag link, they will usually enter a tag detail page (for exampletag/list.htmlortag/index.html)，here needs to display all the documents associated with this tag.tagDataListThe tag is designed for this purpose.

On this page, the system will automatically identify the tag ID currently being visited. You can usetagDataListGet the list of associated documents and combine it with the pagination tagspaginationImplement pagination display:

{# 假设这是在tag/list.html模板中，系统会自动获取当前Tag的ID #}
<div>
    <h1>标签：{% tagDetail with name="Title" %}</h1>
    <p>{% tagDetail with name="Description" %}</p>

    <h2>与此标签相关的文章：</h2>
    {% tagDataList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
        <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        <span>阅读量：{{item.Views}}</span>
    </div>
    {% empty %}
    <p>此标签下暂无文章。</p>
    {% endfor %}
    {% endtagDataList %}

    {# 分页代码 #}
    <div>
        {% 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>

In this example,tagDataList archives with type="page" limit="10"It will get the pagination list of 10 documents per page under the current tag.for item in archivesThe loop is used to display the title, description, publish time, reading volume, and other information of each article. Don't forget.tagDetailLabel, it can help you get detailed information about the current label, such as title and description, to enrich the content of the tab page.

3. Display the tag cloud or popular tags of the entire site

Sometimes, you may want to display a 'tag cloud' or 'popular tags' list in the sidebar or footer of a website so that users can discover more topics. At this time, you can still usetagListLabel, but adjust the parameters slightly.

If you want to get all tags on the site that are not associated with any specific document, you can.itemIdparameter settings0Or leave it blank and uselimitParameters to control the display quantity. You can also adjust it throughletterFilter tags that start with specific letters, or throughcategoryIdFilter tags under specific categories (assuming tags are associated with categories).

<div>
    <h3>热门标签</h3>
    <ul class="tag-cloud">
        {% tagList tags with limit="20" order="id desc" %} {# 获取最新的20个标签 #}
        {% for item in tags %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
        {% endfor %}
        {% endtagList %}
    </ul>
</div>

Through the flexible combination and use of these tags, Anqi CMS can enable you to easily achieve a complete process from backend tag management to frontend content display, providing users with a richer browsing experience and laying a solid foundation for website SEO optimization.

Common Questions (FAQ)

1. How to set independent SEO information for the tag page?You can edit each tag in the "Content Management" -> "Document Tags" section of the Anqi CMS backend.In the editing interface, you can find fields such as 'SEO title', 'tag keywords', and 'tag summary'.<title>/<meta name="keywords">and<meta name="description">Tag content to achieve independent SEO optimization for the tag page.

2. What is the difference between tags and categories? How should I choose to use them?分类（Category）通常用于内容的层级结构组织，是一种一对多的关系（一篇文章只能属于一个分类，但一个分类下有多篇文章）。For example: news, blogs, products.The tag (Tag) is more focused on the non-hierarchical association of content, which is a many-to-many relationship (an article can have multiple tags, and a tag can also be associated with multiple articles).Tags can help users discover content from more dimensions and cross classification boundaries. When selecting to use, if your content has clear hierarchical ownership, use categories.