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

In AnQiCMS, adding Tag tags to documents and associating them for display and filtering on the front end is an effective way to enhance the organization of website content and user experience.Tag labels can not only help users find the content they are interested in faster, but also optimize the keyword layout of the website from the SEO level, increasing the exposure of the content.Next, we will discuss in detail how to implement this feature in AnQiCMS.

1. Add Tag tags to documents in the background

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

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

Here, you can directly enter 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, the system will recognize it as a separate Tag.Likewise, you can continue to add multiple related tags such as "keyword research", "content marketing", etc.AnQiCMS supports you to select an existing Tag, and you can also enter a new Tag to create it, which greatly simplifies the creation and reuse process of tags.

When you enter a new Tag and press Enter, it will be displayed as a separate small square below the input box, indicating that the Tag has been successfully added.If you want to delete a tag that has 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 Tag" feature under "Content Management" to manage Tag labels collectively.Here, you can view, edit, or delete all the Tag tags on the website, including modifying their names, SEO information (such as SEO titles, keywords, descriptions) even custom URL aliases, which is very important for standardizing the tag system and improving SEO performance.

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

After successfully adding tags to the document, the next step is to display these tags on the website front end, making it convenient for users to browse.Usually, we will display all the tags associated with the document on the document details page.

AnQiCMS provides powerful template tag features, among whichtagListTags are specifically used to retrieve and display the Tag list of documents. In the template file of the document detail page (such asarchive/detail.html), you can use the following method to associate and display the Tag of the current document:

{# 假设在文档详情页，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 obtain the tag list.tagsIt is the variable name defined for the obtained tag list.itemId=archive.IdInstruct the system that we want to obtain tags related to the current document (byarchive.IdSpecify) associated tags.limit="10"It limits the maximum display of 10 tags, you can adjust this number according to your actual needs.
  • {% for item in tags %}: This is a standard loop statement used for traversing.tagListEach tag obtained.
  • {{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 the tag based on the website's CSS to make it beautiful.

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

Front-end implementation of Tag label filtering and list page

The true value of Tag tags lies in their filtering and content aggregation capabilities.AnQiCMS allows you to create a dedicated Tag list page, even allowing users to filter content by clicking on Tags.

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

To allow users to view all the Tags of the website, you can create one in the template directorytag/index.htmlFile, as the Tag homepage of the website. On this page, you can list all the Tags on 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" %}It will retrieve all tags from the website and support pagination. Users can click on the Tag on the page to view all documents under the Tag.

2. Document list page for a specific Tag

When a user clicks on a Tag on the home page or the document detail page, it will jump to a page that displays all documents associated with that Tag. AnQiCMS will default to handling such URLs based on pseudo-static rules, for example/tag/SEO.htmlor/tag-1.html(Depending on your pseudo-static settings), and automatically pass the current Tag ID or alias to the template.

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

”`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}}">上一页