How to add multiple Tag tags to a document and associate them for display and filtering on the front end?

1. Add Tag tags to the document in the background

In AnQiCMS backend, adding Tag tags to documents is an intuitive and convenient process.

First, you need to log in to the AnQiCMS management backend and then navigate to the 'Document Management' under the 'Content Management' menu.Whether you are creating a new document or editing an existing document, you will find a section named 'Tag Tag' on the document editing page.

Here, you can directly input the Tag you want to add.For example, if your document is about 'website optimization', you can type 'SEO' in the input box and then press Enter, and the system will recognize it as a separate Tag.Similarly, you can continue to add multiple related tags such as 'Keyword Research' and 'Content Marketing'.AnQiCMS supports you to choose an existing Tag, or input a new Tag to create, which greatly simplifies the creation and reuse process of tags.

When you enter a new Tag and press Enter, it will be displayed as an independent small square below the input box, indicating that the Tag has been successfully added.If you want to delete a tag that has already been added, just click the 'X' icon on the right.

In addition to adding directly on the document editing page, you can also find the 'Document Tags' feature under 'Content Management' for centralized tag management.Here, you can view, edit, or delete all Tag tags on the website, including modifying their names, SEO information (such as SEO title, keywords, description) even custom URL aliases. This is very important for standardizing the tag system and improving SEO effects.

II. How to associate and display document Tag tags on the frontend

After successfully adding Tags to the document, the next step is to display these tags on the website's front end, making it convenient for users to browse.The translation of the value is: Usually, we will display all tags associated with the document on the document detail page.

AnQiCMS provides powerful template tag features, wheretagListtags are specifically used to retrieve and display the document's Tag list. In the template file of the document detail page (such asarchive/detail.htmlIn 【en】, you can use the following methods to associate the display of the current document's Tag:.

{# 假设在文档详情页，archive代表当前文档对象 #}
<div class="document-tags">
    <span>相关标签：</span>
    {% 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>

In this code block:

  • {% tagList tags with itemId=archive.Id limit="10" %}:tagListIt is a template tag used to get the tag list.tagsIt is the variable name defined for the obtained tag list.itemId=archive.IdTell the system that we want to retrieve tags associated with the current document (byarchive.Idspecified).limit="10"It limits the maximum number of tags displayed to 10. You can adjust this number according to your actual needs.
  • {% for item in tags %}This is a standard loop statement used for iteration.tagListGet each label.
  • {{item.Link}}：Output the link address of the current tag, click to enter the exclusive page of the tag, and view all documents associated with the tag.
  • {{item.Title}}：Output the title text of the current tag.
  • class="tag-item"You can add styles to tags based on the website's CSS to make them look beautiful.

By this simple template code, users can clearly see the Tag tags closely related to the content while browsing the document, and by clicking on these tags, they can explore more similar content.

Three: Implementing the filtering of Tag tags and the list page for the front-end

The true value of the tag lies in its filtering and content aggregation capabilities.AnQiCMS allows you to create dedicated Tag list pages, even letting users filter content by clicking on Tags.

1. Create the list page (Tag homepage) for all Tags

To allow users to overview all the Tags on the website, you can create atag/index.htmlFile, as the Tag homepage of the website. On this page, you can list all the Tags in the website.

{# template/你的模板目录/tag/index.html #}
<div class="all-tags-section">
    <h1>所有热门标签</h1>
    <ul class="tag-cloud">
        {% tagList tags with type="page" limit="50" %} {# type="page" 启用分页，limit限制每页显示数量 #}
            {% for item in tags %}
                <li><a href="{{item.Link}}" title="查看{{item.Title}}相关的文档">{{item.Title}}</a></li>
            {% endfor %}
        {% endtagList %}
    </ul>

    {# 如果标签数量很多，可以添加分页 #}
    {% pagination pages with show="5" %}
        <div class="pagination-controls">
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for pageItem in pages.Pages %}
                <a href="{{pageItem.Link}}" class="{% if pageItem.IsCurrent %}active{% endif %}">{{pageItem.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        </div>
    {% endpagination %}
</div>

Here,{% tagList tags with type="page" limit="50" %}Will retrieve all tags from the website and support pagination display. Users can click on the Tag on the page to further view all documents under the Tag.

2. List page of documents with a specific Tag

When a user clicks on a Tag on the Tag homepage or the document detail page, it will jump to a page that displays all documents associated with that Tag. AnQiCMS will default to processing such URLs according to the pseudo-static rules, for example:/tag/SEO.htmlor/tag-1.html[It depends on your pseudo-static settings), and automatically passes the current Tag ID or alias to the template.

You need to create it in the template directory.tag/list.htmlFile, used to display the document list under a specific Tag. On this page, you can usetagDataListTag to get the documents associated with the current Tag.

【en】twig {# template/your/template/directory/tag/list.html #}

<h1>标签：{% tagDetail with name="Title" %} 相关文档</h1>
<ul class="document-items">
    {% tagDataList archives with type="page" limit="10" %} {# type="page" 启用分页 #}
        {% for item in archives %}
            <li>
                <a href="{{item.Link}}" title="{{item.Title}}">
                    {% if item.Thumb %}<img src="{{item.Thumb}}" alt="{{item.Title}}">{% endif %}
                    <h2>{{item.Title}}</h2>
                    <p>{{item.Description|truncatechars:100}}</p>
                    <span class="views">浏览量：{{item.Views}}</span>
                </a>
            </li>
        {% empty %}
            <li>当前标签下没有找到任何文档。</li>
        {% endfor %}
    {% endtagDataList %}
</ul>

{# 同样，为文档列表添加分页 #}
{% pagination pages with show="5" %}
    <div class="pagination-controls">
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页