如何在AnQiCMS中显示特定Tag标签的描述和链接？

在安企CMS中，标签（Tag）是一种强大的内容组织工具，它不仅能帮助您对内容进行更细致的分类，还能优化网站的SEO表现，并提升用户的浏览体验。有时，您可能希望在网站前端的某个位置，不仅仅显示标签的名称，还能展示其更详细的描述信息，甚至是直接跳转到该标签相关内容的链接。

这并非难事，安企CMS提供了灵活的模板标签，让您能够轻松实现这些需求。我们将从后台设置开始，逐步深入到前端模板的实际应用，确保您能完全掌握。

一、在后台为Tag标签添加描述和链接

首先，我们需要确保每个Tag标签都拥有完整的描述信息和正确的链接结构。这些配置都在安企CMS的后台完成。

  1. 进入Tag标签管理界面： 登录安企CMS后台，通过左侧菜单导航至“内容管理”下的“文档标签”选项。
  2. 创建或编辑Tag标签： 在文档标签列表中，您可以选择编辑一个已有的标签，或者点击“新增文档标签”来创建一个新的标签。
  3. 完善Tag标签信息： 在标签的编辑页面，有几个关键字段与我们的目标直接相关：
    • 标签名称： 这是标签的显示名称，也是最基本的标识。
    • 自定义URL： 这个字段允许您为标签设置一个个性化的、对SEO友好的链接别名。安企CMS通常会自动根据标签名称生成拼音URL，但您可以手动修改，确保其唯一性和语义化。这个自定义URL将直接影响前端标签的跳转链接。
    • 标签简介： 这里是您为Tag标签添加描述性文字的地方。这些内容可以是对标签主题的简要概述，或是一些引导性的信息，它们将会在前端被调用显示。
    • SEO标题和标签关键词： 虽然不直接显示，但这些字段对于提升标签页面的搜索引擎可见度至关重要，建议您也一并完善。

完成这些设置后，保存您的更改。现在，您的Tag标签就具备了可调用的描述和链接信息。

二、在网站前端展示Tag标签的描述和链接

安企CMS采用类似Django模板引擎的语法，通过特定的模板标签来调用后台数据。我们将分几种常见的场景来展示如何操作。

1. 显示所有Tag标签的列表及描述

如果您想在网站的侧边栏、页脚或专门的标签聚合页面上，展示所有或部分Tag标签，并且包含它们的描述和链接，可以使用 tagList 标签。

tagList 标签主要用于获取文档标签列表。当您希望获取所有标签（而非某个特定文档的标签）时，需要将 itemId 参数设置为 0。

<div class="tag-cloud">
    <h3>热门标签</h3>
    {% tagList tags with itemId="0" limit="20" %} {# 获取所有标签，限制显示20个 #}
    {% for item in tags %}
        <div class="tag-item">
            <a href="{{ item.Link }}" title="{{ item.Description }}">{{ item.Title }}</a>
            {% if item.Description %}
                <p class="tag-description">{{ item.Description }}</p>
            {% endif %}
        </div>
    {% empty %}
        <p>目前还没有任何标签。</p>
    {% endfor %}
    {% endtagList %}
</div>

代码解析：

  • {% tagList tags with itemId="0" limit="20" %}：这行代码会获取网站中所有的Tag标签，并将它们存储在名为 tags 的变量中。limit="20" 限制了只显示最近添加的20个标签。
  • {% for item in tags %}：遍历 tags 变量中的每一个标签数据。
  • {{ item.Link }}：输出该标签的链接地址。
  • {{ item.Title }}：输出该标签的名称。
  • {{ item.Description }}：输出该标签在后台设置的简介（描述）。
  • {% if item.Description %}：这是一个条件判断，只有当标签有描述时才显示 p 标签。

2. 在Tag标签详情页显示特定Tag的详细信息

当用户点击一个Tag标签进入其详情页面（通常对应 tag/list.html 或 tag/index.html 模板）时，您可能希望在页面顶部显示该Tag的名称、描述、甚至图片等详细信息。这时，tagDetail 标签就派上用场了。在Tag详情页，tagDetail 会默认获取当前Tag的信息。

<div class="tag-detail-header">
    {% tagDetail tagInfo with name="Title" %} {# 获取当前Tag的标题，并赋值给tagInfo变量 #}
    {% tagDetail tagDescription with name="Description" %} {# 获取当前Tag的描述，并赋值给tagDescription变量 #}
    {% tagDetail tagLogo with name="Logo" %} {# 获取当前Tag的Logo，并赋值给tagLogo变量 #}

    {% if tagLogo %}
        <img src="{{ tagLogo }}" alt="{{ tagInfo }}" class="tag-logo">
    {% endif %}
    <h1>{{ tagInfo }}</h1>
    {% if tagDescription %}
        <p class="intro">{{ tagDescription }}</p>
    {% endif %}

    {# 如果需要显示当前标签下的文档列表，可以结合 tagDataList 标签 #}
    <h3>“{{ tagInfo }}”相关文章：</h3>
    <ul class="archive-list">
        {% tagDataList archives with tagId=tag.Id type="page" limit="10" %} {# 获取当前标签下的文章，每页10条 #}
        {% for doc in archives %}
            <li>
                <a href="{{ doc.Link }}">
                    <img src="{{ doc.Thumb }}" alt="{{ doc.Title }}" />
                    <h4>{{ doc.Title }}</h4>
                </a>
                <p>{{ doc.Description|truncatechars:100 }}</p> {# 截取文章描述前100字 #}
            </li>
        {% empty %}
            <li>暂无相关文章。</li>
        {% endfor %}
        {% endtagDataList %}
    </ul>

    {# 分页导航（如果使用了 type="page"） #}
    <div class="pagination">
        {% pagination pages with show="5" %}
            {# ... 分页链接代码，可参考tag-tagDataList.md文档示例 ... #}
        {% endpagination %}
    </div>
</div>

代码解析：

  • {% tagDetail tagInfo with name="Title" %}：在Tag详情页，可以直接通过 name="Title" 获取当前Tag的标题，并将其赋值给 tagInfo 变量。同理获取 Description 和 Logo。
  • {{ tagInfo }}、{{ tagDescription }}、{{ tagLogo }}：输出这些变量值。
  • {% tagDataList archives with tagId=tag.Id type="page" limit="10" %}：这行代码会获取与当前Tag关联的所有文档，并进行分页处理。这里的 tag.Id 会自动获取当前页面的Tag ID。
  • {{ doc.Link }}、{{ doc.Title }}、{{ doc.Thumb }}、{{ doc.Description|truncatechars:100 }}：遍历文档列表，输出文档的链接、标题、缩略图和截取后的描述。

3. 在文档详情页显示文章关联的Tag标签

在文章或产品详情页，您通常会希望在内容底部或侧边栏显示与当前文档关联的所有Tag标签。

”`twig 

<span>标签：</span>
{% tagList tags with limit="10" %} {# 默认获取当前文档关联的标签，限制10个 #}
{% for item in tags %}
    <a href="{{