AnQiCMS 作为一个高效、灵活的内容管理系统，提供了丰富的功能来帮助运营者管理和展示网站内容。其中，文章的Tag标签功能是优化内容组织、提升用户体验和SEO效果的重要一环。了解如何在前端模板中获取并显示这些标签，对于构建功能完善的网站至关重要。

在AnQiCMS后台管理标签

在深入前端模板之前，我们先简要回顾一下标签在AnQiCMS后台是如何工作的。安企CMS为用户提供了直观的标签管理界面。

在内容管理部分，无论是发布文档还是编辑文档，您都可以找到“Tag标签”字段。在这里，您可以为文章添加一个或多个标签，既可以选择已存在的标签，也可以直接输入新标签并按回车键创建。这些标签就像内容的关键词，能够将相关主题的文章关联起来。

此外，内容管理下还有一个专门的文档标签功能，您可以在这里集中查看、编辑、删除所有已创建的标签，甚至为它们设置自定义URL、SEO标题和描述，这对于标签页的SEO优化非常有帮助。

通过这些后台操作，我们为前端显示准备好了丰富的标签数据。

理解AnQiCMS模板基础

AnQiCMS的模板引擎语法类似于Django，这使得前端开发人员可以快速上手。在模板文件中，我们主要通过两种方式与数据交互：

  • 使用 {{变量}} 来直接输出变量的值。
  • 使用 {% 标签 %} 和 {% end标签 %} 来执行逻辑判断、循环、数据查询等操作。

了解这些基本语法是成功在前端获取并显示标签的前提。

在文章详情页获取并显示文章的Tag标签

当用户浏览一篇具体的文章时，通常需要看到这篇文章所属的标签，以便快速了解文章主题或跳转到相关标签下的更多内容。在AnQiCMS的文章详情模板中，获取并显示当前文章的标签非常直接。

我们可以使用 tagList 标签来获取与当前文章关联的标签列表。这个标签默认会读取当前页面的文章ID，所以您无需额外指定 itemId 参数。

以下是一个简单的代码示例，演示如何在文章详情页显示标签：

<div class="article-tags">
    <strong>标签：</strong>
    {% tagList tags with limit="10" %} {# 获取当前文章的最多10个标签 #}
    {% for item in tags %}
    <a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

在这段代码中，tagList tags with limit="10" 会将当前文章关联的最多10个标签赋值给 tags 变量。随后，我们使用 {% for item in tags %} 循环遍历这些标签，并通过 {{item.Link}} 获取标签的链接地址，{{item.Title}} 获取标签的名称，从而在前端渲染出可点击的标签列表。

展示全站热门标签列表（标签云）

除了在单篇文章中展示标签，网站通常还需要一个“标签云”或“热门标签”区域，集中展示全站的所有标签，引导用户发现更多内容。

要获取全站的标签列表，同样使用 tagList 标签，但需要明确指定 itemId="0"，表示不关联任何特定文章，而是获取所有标签。您还可以通过 limit 参数控制显示的数量，例如显示最热门的20个标签。

以下是获取并显示全站热门标签的代码示例：

<div class="popular-tags">
    <h2>热门标签</h2>
    <ul>
        {% tagList allTags with itemId="0" limit="20" %} {# 获取全站的最多20个标签 #}
        {% for tag in allTags %}
        <li><a href="{{tag.Link}}" class="tag-link">{{tag.Title}}</a></li>
        {% endfor %}
        {% endtagList %}
    </ul>
</div>

这里我们将所有标签赋值给 allTags 变量，并通过循环展示它们的名称和链接。您可以根据实际需求，为这些标签添加不同的样式或调整它们的排序（例如根据文章数量或浏览量）。

创建独立的标签列表页 (tag/index.html)

AnQiCMS允许您创建专门的标签列表页，例如 /tags 路径，用于集中展示网站的所有标签，并支持分页功能。根据AnQiCMS的模板约定，这类页面通常命名为 tag/index.html。

在这样的页面中，tagList 标签结合 type="page" 参数，可以实现标签列表的分页显示。同时，配合 pagination 标签，可以生成完整的分页导航。

{# 假设这是 tag/index.html 模板文件 #}
<h1>所有标签</h1>

<div class="tag-list-pagination">
    {% tagList tags with type="page" limit="20" %} {# 每页显示20个标签，并启用分页 #}
    <ul class="tag-grid">
    {% for item in tags %}
    <li>
        <a href="{{item.Link}}" class="tag-card">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description | truncatechars:100}}</p> {# 显示标签描述，并截取前100字 #}
        </a>
    </li>
    {% empty %}
    <li>
        暂无任何标签。
    </li>
    {% endfor %}
    </ul>
    {% endtagList %}

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

显示某个标签下的文章列表 (tag/list.html)

当用户点击一个特定的标签时，网站通常会跳转到一个页面，显示该标签下的所有