How to display the document Tag label on the front-end page and use it as an entry for content association?

How to effectively organize and present content in modern website operations is not only related to user experience, but also a key factor in Search Engine Optimization (SEO).AnQiCMS provides a powerful and flexible Tag feature that can not only help you better manage website content but also act as a convenient entry point for users to discover related information, greatly enhancing the connectivity and interactivity of content on the website.

Overview of Tag labels in Anqi CMS

In Anqi CMS, the design concept of Tag label is very open and flexible.They are different from the traditional classification system, not limited to specific content models or classification levels, and can be freely used across various content types such as articles, products, etc.You can understand Tag as a keyword of the topic of the content, which can effectively link documents with similar or related themes scattered in different categories.For example, an article about "website design trends" and a "responsive website building product", although belonging to different models, can still share the "responsive design" tag, thus establishing a horizontal connection between content.

Background management and content association: lay a foundation for front-end display

In order to effectively display and utilize Tag tags on the front-end page, it is necessary to first do a good job of background settings and content association.

When you edit or publish documents, Anqie CMS provides a convenient Tag label input box.You can directly enter a new tag, press Enter to create and associate;You can also select from the existing tag library. This operation allows content creators to easily add multiple relevant keywords to each document.

Further, Anqi CMS allows you to set independent "tag name", "index letter", "custom URL", "SEO title", "tag keywords", and "tag description" for each tag in the Tag label management interface (document tag).These settings are crucial for improving the search engine friendliness of the Tag page.Especially the "Custom URL" feature, which helps you create clear and meaningful static URLs, which is very beneficial for SEO inclusion and user memory.By configuring special SEO information for Tag tags, you can ensure that each Tag page performs better in search engines.

Front-end page display: Make the Tag label come to life

After the Tag label is associated with the content in the background and configured, the next step is how to cleverly display them on the front-end page and transform them into an entry point for users to explore the content.AnQi CMS provides dedicated template tags to make this process simple and intuitive.

Display related Tags on the document detail page

On the article or product detail page, displaying the associated Tag label is the most direct way to link the content.This can help readers quickly understand the multiple dimensions of the current content and guide them to explore more related content.

You can usetagListLabel to get the current document associated Tag list. You can call it like this in the document detail page template.

<div>
    <strong>相关话题：</strong>
    {% tagList tags with itemId=archive.Id limit="10" %} {# 获取当前文档的最多10个Tag #}
    {% for item in tags %}
    <a href="{{item.Link}}" class="tag-link">{{item.Title}}</a> {# 每个Tag都是一个可点击的链接 #}
    {% endfor %}
    {% endtagList %}
</div>

This code will traverse the current document(archive.IdAssociate all Tags and generate a series of clickable links.Users click on these links and can be redirected to the exclusive page of the Tag to view all documents associated with the Tag.

Create Tag tag list page: Explore all topics

To allow users to view all the popular topics or keywords on the website, you can create a dedicated 'Tag tag list page'. Usually, this page corresponds to the template directory under your.tag/index.htmlfile.

You can use this page totagListTags to display all the Tags on the website, and can combine the pagination feature to make the list easier to browse:

<div class="tag-cloud">
    <h2>热门标签</h2>
    {% tagList tags with type="page" limit="50" %} {# type="page"启用分页，limit设置每页显示数量 #}
    {% for item in tags %}
    <a href="{{item.Link}}" title="共{{ item.ArchiveCount }}篇文章">{{item.Title}} ({{item.ArchiveCount}})</a>
    {% endfor %}
    {% endtagList %}

    {# 如果标签数量多，可能需要分页 #}
    <div class="pagination">
        {% pagination pages with show="5" %}
        {# 这里可以放置分页链接的代码，参考pagination标签用法 #}
        {% endpagination %}
    </div>
</div>

This code will list all the Tags on the website and display the number of documents associated with each Tag(ArchiveCount）。Users can find all topics on this page and delve deeper into their interests according to their interests.

Create a document list page under the Tag tag: Focus on a specific topic

When a user clicks on a Tag link, they expect to see all documents associated with that Tag. This page usually corresponds to your template directory undertag/list.htmlfile.

Here, you need to usetagDataListTag to retrieve the document list associated with the current Tag. This tag will automatically read the Tag ID of the current page (if included in the URL) and retrieve all related articles or products.

<div class="tag-documents">
    {% tagDetail currentTag with name="Title" %} {# 获取当前Tag的标题 #}
    <h2>标签：{{ currentTag }}</h2>

    {% tagDataList archives with type="page" limit="10" %} {# 获取与当前Tag关联的文档列表，并启用分页 #}
    {% for item in archives %}
    <article>
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
        <p class="meta">发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}} | 阅读：{{item.Views}}</p>
    </article>
    {% endfor %}
    {% empty %}
    <p>当前标签下没有找到任何文档。</p>
    {% endtagDataList %}

    {# 文档列表的分页导航 #}
    <div class="pagination">
        {% pagination pages with show="5" %}
        {# 这里放置分页链接的代码 #}
        {% endpagination %}
    </div>
</div>

This code first displays the current Tag's title, then lists all documents associated with the Tag, and provides pagination features.So, users can easily browse all content under a specific topic.

Tag detail page information display

In addition to the document list, the Tag itself can also have a detail page to display its own description information, which is very valuable in terms of SEO and user understanding. For example, you cantag/list.htmlPage adds Tag description and Logo.

You can usetagDetailTag to get the details of the current Tag:

<div class="tag-info">
    {% tagDetail tagInfo with name="Title" %}
    <h1>{{ tagInfo }}</h1>
    {% tagDetail tagDesc with name="Description" %}
    {% if tagDesc %}
        <p>{{ tagDesc }}</p> {# 显示Tag的简介 #}
    {% endif %}
    {% tagDetail tagLogo with name="Logo" %}
    {% if tagLogo %}
        <img src="{{ tagLogo }}" alt="{{ tagInfo }}" class="tag-logo"> {# 显示Tag的Logo #}
    {% endif %}
</div>

This code will display the name, description, and Logo of the Tag at the top of the Tag document list page, providing users with more comprehensive Tag information.

The value of Tag label as a content association entry

Tag label plays multiple roles in Anqi CMS through the aforementioned front-end display strategy:

• Enhance content discoverability：Users can easily find more related content by clicking on the Tag, extending the time users spend on the website.
• Optimize the website navigation structureTag provides another content organization method other than categorization, enriching the internal links and navigation hierarchy of the website.
• Enhances SEO effectivenessEach Tag page is an independent special topic page,配合custom URL and SEO meta information, helps attract search engine crawling, and improve keyword ranking.
• Encourage user participation: Clear Tag display helps users understand the structure of the website content and encourages them to explore and interact.

Summary

The Tag label feature of AnQi CMS is a powerful and flexible tool that allows content operators to manage and associate content more finely.By carefully designing the tag information in the backend and the front-end display, we can transform the Tag tag from a simple keyword into an important hub in the website content ecosystem, bringing users a more smooth and in-depth browsing experience, and also injecting new vitality into the website's SEO performance.

Frequently Asked Questions (FAQ)

Q1: What is the difference between Tag tags and categories in Anqi CMS? A1:Categories usually represent the hierarchical structure of content, with clear hierarchical relationships, used to organize a wide range of content topics.And the Tag tag is more like a key word or topic of the content, which can cross different categories and associate the content horizontally.A content can belong to a category but can have multiple Tag tags to achieve more granular content organization and multidimensional content association.

What are the benefits of setting a 'custom URL' for Tag tags? A2:There are two main benefits to setting a custom URL for Tag tags: one is to improve user experience, making the URL more readable and memorable;Secondly, it greatly optimizes SEO, search engines prefer semantic and clear URL structures, which helps improve the inclusion and ranking of Tag pages.At the same time, custom URLs also avoid the problem of unattractive or not meeting business needs due to the system's default ID.

Q3: How to implement pagination on the Tag tag list page or the document list page under Tag? A3:In AnQi CMS, you can enable pagination by using thetagListortagDataListthe tag withtype="page"parameter. Once enabled,type="page"You can follow the code block immediately after usingpaginationtag to generate page navigation links.paginationTags can be configuredshowParameters to control how many pagination page numbers are displayed, thereby providing users with a complete page turning experience.