How to use Tag labels in AnQiCMS to associate and display related documents on the front end?

AnQiCMS offers powerful classification functions for content management, and also opens up new ways for deep association and multi-dimensional display of content through flexible Tag label mechanisms.Imagine that your website is like a library, with different shelves for categories, and Tag tags are like different subject keywords on books, allowing readers to find books with similar themes scattered across different shelves based on their interests.

Next, let's delve deeper into how AnQiCMS uses Tag tags to make your website content more intelligent and rich in front-end display.

Tag label: The golden key associated with the content

In AnQiCMS, Tag is a powerful and flexible content organization method.It is different from the traditional classification: classification is usually hierarchical and structured, used to define the 'major category' of content;And the Tag label is more like a keyword or topic, which can link together contents with common characteristics across categories and models.A document can belong to only one category, but can have multiple Tag tags, thus achieving multi-angle content aggregation and display.

This flexible association method brings many benefits:

• Improve user experience:Visitors can quickly find the series content they are interested in through the Tag label, without having to navigate through a complex classification structure.
• Strengthen content association:To link seemingly scattered content through a common tag, forming an organic knowledge network, and increasing the user's stay time on the site.
• Optimize Search Engine Optimization (SEO):A page with clear keywords, which can provide more crawling entries and thematic clues for search engines, and help improve the overall SEO performance and keyword ranking of the website.
• Rich content display:The front-end of the website can intelligently recommend related articles, products, or other content based on Tag tags, making each page full of vitality.

Backend management: Easily tag content

In the AnQiCMS backend, the management and application of Tag labels are very intuitive, allowing content operators to efficiently add this 'golden key' to the content.

Create and manage Tag tags

You can manage all Tag tags on the website under the 'Content Management' menu on the 'Document Tags' page.You can add new tags, edit existing tags, or delete unnecessary tags.Each Tag label can be configured in addition to the name:

• Index letter:Organize tags in alphabetical order conveniently.
• Custom URL:Allow you to set a friendly, SEO-friendly URL for the tab page.AnQiCMS automatically generates pinyin based on tag names as the default value, you can also modify it as needed to ensure its uniqueness and conformity across the entire site.
• SEO title, tag keywords, and tag description:These are SEO optimization items for the tag detail page, you can configure independent TDK (Title, Description, Keywords) for each tag to improve the visibility of the tag page in search engines.

Proper planning and management of Tag tags is the first step in bringing them into play. It is recommended that tag names be concise and clear, accurately summarizing the theme of the relevant content.

Add Tag tag to document

When you create or edit a document, you will see an input box labeled "Tag label". Here, you can easily add one or more tags to the current document.

• Select an existing tag:When you type text in the input box, AnQiCMS will intelligently prompt the existing matching tags, click to select.
• Add a new tag:If the tag you enter does not exist, simply type the tag name and press Enter, and the system will automatically add it as a new tag and associate it with the current document.

In this way, you can be very flexible in tagging each document accurately, and categorizing them under multiple related topics.

Front-end Display: The Magic Moment of Tag Tags

The true value of tags lies in their rich display on the website front end.AnQiCMS provides dedicated template tags that allow you to cleverly use Tag to associate and display content in the corners of your website.This is mainly throughtagList/tagDetailandtagDataListTo achieve this with these powerful template tags.

Show the Tag list of a single document (tagList)

When a user reads a document, we usually want to display tags directly related to the document to guide them to discover more similar content.tagListTags are born for this.

You can use it in the template of the document detail pagetagListto get the tag list associated with the current document. For example:

{# 假设这是文档详情页模板中的相关Tag区域 #}
<div>
    <p>本文标签：</p>
    {% tagList tags with itemId=archive.Id limit="10" %}
    {% for item in tags %}
        <a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

ByitemId=archive.IdWe explicitly tell the system to get the currentarchiveTag of (document).limitParameters can control the number of tags displayed. This allows users to clearly see the topics covered in this document and click on the Tag to enter the details page.

Display Tag detail page content (tagDetail)

Each Tag label can have an independent detail page, like a mini special page.When the user clicks the Tag link, they will be redirected to this page.AnQiCMS defaults to providingtag/detail.htmlusing this template file to render Tag details.

In this template, you can usetagDetailTag to get the details of the current Tag, such as its title, description, etc:

{# 假设这是Tag详情页模板（tag/detail.html）的头部 #}
<div class="tag-header">
    <h1>{% tagDetail with name="Title" %}</h1>
    <p>{% tagDetail with name="Description" %}</p>
</div>

Each Tag label can have a rich, dedicated page, providing users with more comprehensive information.

Display the document list under a specific Tag (tagDataList)

The core of the Tag detail page is, of course, to display all documents associated with the Tag. At this time,tagDataListThe tag comes into play. It allows you to get the document list under the specified TagID and supports pagination display.

Intag/list.html(ortag/detail.htmlSuch a Tag document list template depends on your template design, you can use it like thistagDataList:

{# 假设这是Tag文档列表页模板中的文档列表区域 #}
<div class="tag-document-list">
    <h2>关于“{% tagDetail with name="Title" %}”的最新文档</h2>
    {% tagDataList archives with type="page" limit="10" %}
        {% for item in archives %}
        <div class="document-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 %}

    {# 配合分页标签实现分页导航 #}
    {% pagination pages with show="5" %}
        {# 分页导航代码... #}
    {% endpagination %}
</div>

Here, tagDataListIt will automatically read the ID of the current Tag page and list all associated documents. Throughtype="page"andlimit="10"We have set up pagination display, 10 articles per page. Combinedpaginationtags, you can easily build a complete Tag document list page.

It is worth mentioning that the pseudo-static rules of AnQiCMS also provide friendly URL support for Tag tags, for exampletag/index.htmlUsed for Tag list page,tag/list.htmlThis is the document list page under a certain tag, which lays a solid foundation for your website's SEO.

Conclusion

The Tag feature of AnQiCMS is an important manifestation of its content management system's flexibility