如何为文档添加多个Tag标签并在前端进行关联显示和筛选？

在AnQiCMS中，为文档添加Tag标签并将其在前端进行关联显示和筛选，是提升网站内容组织度和用户体验的有效方式。Tag标签不仅能帮助用户更快地找到感兴趣的内容，还能从SEO层面优化网站的关键词布局，增加内容的曝光度。接下来，我们将详细探讨如何在AnQiCMS中实现这一功能。

一、在后台为文档添加Tag标签

在AnQiCMS的后台，为文档添加Tag标签是一个直观且便捷的过程。

首先，你需要登录AnQiCMS管理后台，然后导航到“内容管理”菜单下的“文档管理”。无论是新建文档还是编辑现有文档，在文档编辑页面，你都会找到一个名为“Tag标签”的区域。

在这里，你可以直接输入你想要添加的Tag。例如，如果你的文档是关于“网站优化”的，你可以在输入框中键入“SEO”，然后按回车键，系统就会将其识别为一个独立的Tag。同样，你可以继续添加“关键词研究”、“内容营销”等多个相关Tag。AnQiCMS支持你选择已经存在的Tag，也可以输入新的Tag来创建，这大大简化了标签的创建和复用过程。

当你输入一个新Tag并回车后，它会以一个独立的小方块形式显示在输入框下方，表示该Tag已成功添加。如果你想删除某个已添加的Tag，只需点击其右侧的“X”图标即可。

除了在文档编辑页面直接添加，你还可以在“内容管理”下找到“文档标签”功能，进行Tag标签的集中管理。在这里，你可以查看、编辑或删除网站中所有的Tag标签，包括修改它们的名称、SEO信息（如SEO标题、关键词、简介）甚至自定义URL别名，这对于规范标签体系、提升SEO效果非常重要。

二、前端如何关联显示文档Tag标签

成功为文档添加Tag后，下一步就是让这些标签在网站前台展示出来，方便用户浏览。通常，我们会在文档详情页展示与该文档关联的所有Tag。

AnQiCMS提供了强大的模板标签功能，其中tagList标签专门用于获取和显示文档的Tag列表。在文档详情页的模板文件（例如archive/detail.html）中，你可以使用以下方式来关联显示当前文档的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>

在这段代码中：

• {% tagList tags with itemId=archive.Id limit="10" %}：tagList是用于获取标签列表的模板标签。tags是我们为获取到的标签列表定义的变量名。itemId=archive.Id告诉系统，我们希望获取与当前文档（由archive.Id指定）关联的标签。limit="10"则限制了最多显示10个标签，你可以根据实际需求调整这个数字。
• {% for item in tags %}：这是一个标准的循环语句，用于遍历tagList获取到的每一个标签。
• {{item.Link}}：输出当前标签的链接地址，点击后用户可以进入该标签的专属页面，查看所有关联该标签的文档。
• {{item.Title}}：输出当前标签的标题文字。
• class="tag-item"：你可以根据网站的CSS样式为标签添加样式，使其美观。

通过这段简单的模板代码，用户在浏览文档时，就能清晰地看到与其内容紧密相关的Tag标签，并通过点击这些标签，探索更多同类内容。

三、前端实现Tag标签的筛选和列表页

Tag标签的真正价值体现在其筛选和内容聚合能力上。AnQiCMS允许你创建专门的Tag列表页面，甚至让用户通过点击Tag来筛选内容。

1. 创建所有Tag的列表页（Tag首页）

为了让用户总览网站所有的Tag，你可以在模板目录中创建一个tag/index.html文件，作为网站的Tag首页。在这个页面上，你可以罗列出网站中所有的Tag。

{# 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>

在这里，{% tagList tags with type="page" limit="50" %}会获取网站中的所有标签，并支持分页显示。用户可以通过点击页面上的Tag，进一步查看该Tag下的所有文档。

2. 特定Tag的文档列表页

当用户点击Tag首页或文档详情页中的某个Tag时，会跳转到一个页面，显示所有与该Tag关联的文档。AnQiCMS默认会根据伪静态规则处理这类URL，例如/tag/SEO.html或/tag-1.html（取决于你的伪静态设置），并自动将当前的Tag ID或别名传递给模板。

你需要在模板目录中创建tag/list.html文件，用于展示特定Tag下的文档列表。在这个页面中，你可以使用tagDataList标签来获取与当前Tag关联的文档。

”`twig {# template/你的模板目录/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}}">上一页