在AnQiCMS中,有效利用标签功能是提升网站内容组织性、优化用户体验和增强搜索引擎可见性的关键一环。标签不仅能帮助用户快速找到感兴趣的内容,也能为网站管理员提供灵活的内容分类和关联方式,突破传统分类的层级限制。

AnQiCMS的标签功能强大且灵活,它允许内容创建者为文章和产品添加描述性的关键词或短语。这些标签在后台管理中可以方便地进行创建、编辑和管理,并在文章发布时轻松选择或新增。一旦内容被打上标签,我们就可以在前台页面上利用AnQiCMS内置的模板标签,将这些标签及其关联的内容精准地展示出来。

在文章详情页显示当前文章的标签

当访问者浏览一篇具体文章时,通常会希望看到与该文章内容相关的标签,以便进一步探索同主题的内容。在AnQiCMS中,您可以通过 tagList 标签轻松实现这一点。

这个标签通常用于文章详情页(例如 archive/detail.html 或自定义文章模板),它会智能地获取当前文章所关联的所有标签。您不需要手动指定文章ID,因为它在文章详情页的上下文中会自动识别。

例如,要在文章内容下方展示所有相关标签,您可以这样编写模板代码:

{# 假设这是文章详情页模板的一部分 #}
<div class="article-tags">
    <strong>标签:</strong>
    {% tagList tags %} {# 默认获取当前文档的标签 #}
        {% for item in tags %}
            <a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}}</a>
        {% endfor %}
    {% endtagList %}
</div>

这段代码会遍历当前文章关联的所有标签,并为每个标签生成一个可点击的链接,链接到该标签的详情页面,方便用户点击查看更多相关文章。

制作独立的标签列表页面

为了让用户能够发现网站中的所有标签,您可能需要创建一个独立的标签列表页面,就像一个“标签云”或“标签索引”。在AnQiCMS中,模板文件通常会命名为 tag/index.html 来承载这类页面。

在这个页面上,我们同样使用 tagList 标签,但这次不指定任何 itemId 参数,这样它就会获取整个网站的所有标签。您可以根据需要设置 limit 参数来控制显示的标签数量。

例如,创建一个显示所有标签的页面:

{# tag/index.html 模板文件内容示例 #}
<h1>所有标签</h1>
<div class="tag-cloud">
    {% tagList tags with limit="100" %} {# 获取网站前100个标签 #}
        {% for item in tags %}
            <a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}} ({{item.ArchiveCount}}){# 假设你想显示每个标签的文章数量 #}</a>
        {% endfor %}
    {% endtagList %}
</div>

这里 item.ArchiveCount 虽然在 tag-archiveTag.mditem 可用字段中没有直接列出,但在实际使用中,许多CMS的标签对象会包含关联内容的数量,如果实际不支持,可以忽略。此处作为演示如何拓展显示信息。

通过这样的页面,用户可以一目了然地看到网站涵盖的所有主题,并通过点击进入特定标签的详情页。

制作标签详情页及显示关联文章

当用户点击某个特定的标签(无论是从文章详情页还是标签列表页),他们期望看到该标签的详细信息以及所有与该标签关联的文章。在AnQiCMS中,这类页面通常由 tag/list.html 模板文件负责渲染。

在这个页面中,我们会用到两个核心标签:

  1. tagDetail 标签:用于获取当前页面的标签本身的详细信息,例如标签名称、描述等。您同样无需指定ID,它会自动识别当前页面的标签ID。

  2. tagDataList 标签:用于获取与当前标签关联的所有文章。它会自动识别当前标签页面的 tagId,并可以配合 type="page"pagination 标签实现分页展示关联文章。

以下是一个标签详情页的模板代码示例:

”`twig {# tag/list.html 模板文件内容示例 #} {% tagDetail currentTag %} {# 获取当前标签的详细信息 #}

<h1>标签:{{currentTag.Title}}</h1>
{% if currentTag.Description %}
    <p>描述:{{currentTag.Description}}</p>
{% endif %}

{% endtagDetail %}