In website operation, Tag tags (also known as keyword tags) are a very practical way of organizing content, which can help users quickly find related content and also improve the SEO effect of the website content.AnQiCMS (AnQiCMS) provides a comprehensive Tag tag configuration and display feature, making it easy and efficient to manage and display these tags.Below, let's take a detailed look at how to set up and use these tags in AnQiCMS.

1. Back-end configuration and management of article Tag tag

In AnQiCMS, the configuration of Tag labels is mainly divided into two major parts: adding tags when editing articles, and maintaining them through an independent tag management interface.

1. Add Tag label in the article editing page

When you publish or edit articles in the background, you will see an input box named "Tag tag". This is the main entry for tagging your articles.

You can directly type the tag name in the input box, for example, 'website operation', 'SEO optimization', 'content marketing', etc.Enter a label and press Enter, and it will automatically be converted into a manageable label item.You can add multiple tags to the same article, linking it to multiple related topics.When the tag you enter already exists in the system, AnQiCMS usually provides an autocomplete feature to help you select existing tags and maintain consistency.

2. Independent Tag Label Management

In addition to adding tags during article editing, AnQiCMS also provides an independent "document tag" management function.You can find it under the content management menu in the background. This interface allows you to manage all tags on the website more comprehensively.

Here, you can perform the addition, editing, and deletion of tags. Each tag has multiple configurable properties, which are crucial for improving the SEO performance of the tag page:

  • Tag name:This is the display name of the label.
  • Index letter:Used for categorizing labels, usually the first letter of the label name.
  • Custom URL:You can set a friendly, personalized URL for each tag.This is very important for search engine optimization, it can make the link structure of the tag page clearer.It should be noted that the custom URL should be unique across the entire site and should only support letters, numbers, and underscores.
  • SEO title, tag keywords, tag description:These fields allow you to set TDK (Title, Description, Keywords) separately for each tag page.Writing a unique TDK for each tag can help search engines better understand the theme of the tag page, thereby achieving better rankings.The label introduction is usually used to display descriptive content on the front-end label page.

By these detailed configurations, you can ensure that each tag can not only effectively organize content but also become an independent page with good SEO performance.

Second, display the article Tag tag list in the front-end template

After setting up the background tags, the next step is to display them on the front page of the website.AnQiCMS through a powerful template tag system, allowing you to flexibly display various forms of Tag tag lists on different pages.The core tags includetagList/tagDetailandtagDataList.

1. Display related Tag tags on the article detail page

On the article detail page, it is usually necessary to display the Tag tags associated with the current article. This helps readers quickly understand the topics covered by the article and click to jump to other related content.

You can usetagListTags to achieve this. WhentagListIt is called in the document detail page, it will default to read the current article ID to get related tags.

{# 示例：在文章详情页显示当前文章的Tag标签 #}
<div>
    <strong>文章标签：</strong>
    {% tagList tags with limit="10" %} {# limit参数控制显示数量 #}
    {% for item in tags %}
        <a href="{{item.Link}}">{{item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

2. Display the entire site Tag tag cloud or popular tag list

If your website needs a dedicated 'tag cloud' area, or wants to display the most popular or latest tags across the entire site,tagListtags are also applicable.

In this case, you do not need to specifyitemId(Document ID),tagListWill be used to obtain documents that meet other conditions such aslimitLimit the number of,letterSort by first letter orcategoryIdTags filtered by category. Such lists are usually placed on the homepage, sidebar, or a specialtag/index.htmltag homepage template.

{# 示例：显示全站热门Tag标签，限制10个 #}
<div>
    <h3>热门标签</h3>
    {% tagList tags with limit="10" order="views desc" %} {# 假设存在views字段可按浏览量排序 #}
    {% for item in tags %}
        <a href="{{item.Link}}">{{item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

3. Display the article list under a specific Tag

When a user clicks on a Tag label, it usually jumps to a page displaying a list of all articles associated with that tag. This feature is usually implemented intag/list.htmlor similar-named templates.

You can usetagDataListTag to get articles under specific tags. This tag is particularly powerful, supporting pagination, filtering by model, and displaying by sorting method.

{# 示例：在Tag列表页显示当前Tag下的文章列表，并支持分页 #}
{# tagId通常会从URL参数或当前页面上下文自动获取 #}
<div>
    <h1>标签: {% tagDetail with name="Title" %}</h1> {# 获取当前标签的标题 #}
    <p>{% tagDetail with name="Description" %}</p> {# 获取当前标签的描述 #}

    {% tagDataList archives with type="page" limit="10" %} {# type="page"启用分页功能 #}
    {% for item in archives %}
        <article>
            <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
            <p>{{item.Description}}</p>
            <small>发布时间: {{stampToDate(item.CreatedTime, "2006-01-02")}}</small>
        </article>
    {% empty %}
        <p>该标签下目前没有文章。</p>
    {% endfor %}
    {% endtagDataList %}

    {# 分页导航 #}
    <div class="pagination">
        {% pagination pages with show="5" %}
            <a href="{{pages.FirstPage.Link}}">首页</a>
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for item in pages.Pages %}
                <a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
            <a href="{{pages.LastPage.Link}}">尾页</a>
        {% endpagination %}
    </div>
</div>

In this example,tagDetailUsed to obtain the details of the current tag, andtagDataListit is responsible for loading the list of articles associated with the tag.type="page"the parameter ensures that the pagination feature is enabled, and is combined withpaginationThe tag has generated a complete page navigation.

4. Custom URL structure of Tag page

To better support SEO and user experience, AnQiCMS allows you to customize the URL structure of Tag list page and Tag detail page through pseudo-static rules. In the background "pseudo-static rules" settings, you can set up the following fortagIndex(Tag homepage) andtag(Tag Details) Set a personalized URL pattern, for example, using/tags/{filename}.htmlor/tag/{id}.htmletc., to match your website style and SEO strategy.

Summary

By following these steps, you can flexibly configure and display the article Tag tag list in AnQiCMS.From fine management on the backend to the flexible invocation of frontend templates, AnQiCMS provides a comprehensive solution to help your website's content be more organized, easier to discover, and achieve better search engine performance.

Frequently Asked Questions (FAQ)

1. What is the difference between Tag tags and article categories? How should I choose to use them?

Articles are commonly used for hierarchical content segmentation, with clear parent-child or peer relationships, a more fixed and organized structure (for example: News -> Domestic