How to retrieve and display the Tag list associated with the document in AnQi CMS?

The Anqi CMS provides flexible and powerful tag (Tag) functionality in content management, which not only helps you better organize content but also effectively improves the website's SEO performance and user experience.This article will provide a detailed introduction on how to manage and retrieve the Tag list associated with documents in Anqi CMS, and display it on your website frontend.

Backend tag management: effective classification and association of content

In 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 tag, you can set its 'Tag Name', which is the display text of the tag on the front end.To enhance search engine friendliness, you can configure a 'custom URL' for tags, which will affect the URL structure of the tag page, and it is recommended to use meaningful English or Pinyin aliases.At the same time, fields such as "SEO Title", "tag keywords", and "tag description" allow you to perform independent SEO optimization for each tag page, ensuring that each tag collection can be better understood and indexed by search engines.

The power of tags lies in their flexibility. When you edit or publish documents such as articles, products, etc., you will see an option for "Tag tag".Here, you can add one or more tags to the current document.Anqi CMS supports you in selecting existing tags, or you can directly enter a new tag name and press Enter, and the system will automatically create and associate these new tags.This many-to-many association method 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 label active

Presenting the backend-managed tags on the website front end 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 details page, you may want to display all the tags associated with the current article or product. At this point,tagListThe label comes into play. You can useitemIdthe parameter to specify which document's label to retrieve, usually on the document detail page, thisitemIdwill default to reading the current document's ID.

For example, in your article detail template (usually{模型table}/detail.htmlIn it, you can display the tags of the current article like this:

<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 code above,tagListTags will search for the current document(itemId=archive.Id) and assign all associated tags totagsVariable.limit="10"It limited the maximum display of 10 tags. Next, throughforLoop throughtagsfor eachitemRepresents a tag, you can through{{item.Link}}Get the link to the tag page, through{{item.Title}}Get the tag name and display it.

2. Show the document list associated with a specific tag

When a user clicks on a tag link, they will usually enter a tag detail page (for exampletag/list.htmlortag/index.htmlHere, all the documents associated with the tag need to be displayed.tagDataListThe tag is designed for this purpose.

On this page, the system will automatically identify the current tag ID being accessed. You can usetagDataListGet the list of associated documents and combine with 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, publishing time, and reading volume of each article. Don't forget.tagDetailTags, it can help you get detailed information about the current tag, such as title and description, to enrich the content of the tag page.

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

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

If you want to get all the labels on the site, not associated with any specific document, you canitemIdthe parameter to0Or leave it blank and uselimitParameters to control the display quantity. You can alsoletterFilter tags that start with specific letters, or throughcategoryIdFilter tags under specific categories (assuming the tags are associated with the 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>

By combining and using these tags flexibly, Anqi CMS can easily enable you to implement a complete process from backend tag management to frontend content display, providing users with a richer browsing experience, and also laying a solid foundation for the SEO optimization of the website.

Frequently Asked Questions (FAQ)

How to set independent SEO information for a 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 description'.After entering the corresponding content here, this information will be used as the tag detail page's<title>/<meta name="keywords">and<meta name="description">Tag content, thus achieving independent SEO optimization for the tag page.

2. What is the difference between tags and categories? How should I choose to use them?Category (Category) is usually used for the hierarchical organization of content, representing a one-to-many relationship (an article can only belong to one category, but a category can have multiple articles).For example: news, blogs, products. Tags, on the other hand, are 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, crossing the boundaries of categories.Choose to use it when your content has a clear hierarchical attribution, use classification.If the content can be described or classified from multiple perspectives, and these perspectives may cross different categories, then