在安企CMS中，文章标签不仅是组织内容、提升用户体验的利器，更是优化搜索引擎抓取和排名（SEO）的重要元素。它们能够帮助访问者快速找到相关内容，也能让搜索引擎更好地理解网站结构。那么，如何在AnQiCMS的模板中灵活地循环遍历并展示这些文章标签列表呢？这其实比你想象的要简单，AnQiCMS强大的模板标签体系让这一切变得非常直观。

AnQiCMS采用了类似Django模板引擎的语法，这使得内容开发者能够轻松上手。在处理文章标签时，我们主要会用到一个核心标签：tagList。

深入理解 tagList 标签

tagList 标签是专门用于获取和展示文章标签数据的。它允许你根据不同的需求，如获取当前文章的标签、指定文章的标签，甚至是全站的标签列表。

要使用 tagList 标签，你需要像这样将其包裹在一个 {% tagList ... %} 和 {% endtagList %} 结构中，并在其中利用 {% for ... %} 循环来遍历获取到的标签数据。

让我们来看看 tagList 标签常用的参数以及它能提供哪些信息：

  • itemId: 这个参数非常关键。
    • 如果你在文章详情页使用 tagList 并且不指定 itemId，它会默认获取当前正在浏览的文章的标签。
    • 如果你想获取指定文章的标签（比如在文章列表页，为每篇文章展示其各自的标签），你可以通过 itemId="文章ID" 来传递文章的ID。
    • 如果你希望获取全站的标签，而不针对某个特定文章，可以将 itemId 设置为 "0"。
  • limit: 这个参数可以帮助你控制标签的显示数量，比如 limit="5" 表示最多显示5个标签。这在展示热门标签或限制文章详情页标签数量时非常有用。
  • type: 在 tag-archiveTag.md 中提到 type="page" 可以用于分页显示标签列表，主要在 tag/index.html 这样的标签首页模板中使用。对于在文章中循环展示标签，通常不需要设置此参数。
  • siteId: 如果你使用了AnQiCMS的多站点管理功能，并且需要调用其他站点的数据，可以通过这个参数来指定站点ID。一般情况下无需填写。

在 {% for ... %} 循环中，每个标签项通常会作为一个变量（比如我们将其命名为 item），它会包含以下有用的字段：

  • {{item.Title}}: 标签的显示名称，比如“网站运营”、“SEO技巧”等。
  • {{item.Link}}: 标签对应的URL链接，点击后通常会跳转到该标签下的文章列表页。
  • {{item.Id}}：标签的唯一ID。
  • {{item.Description}}：标签的描述信息（如果在后台设置了）。

实战演练：常见场景下的标签展示

接下来，我们通过几个常见的场景来具体看看如何在模板中应用 tagList 标签。

场景一：在文章详情页显示当前文章的标签

这是最常见的一种需求。当用户阅读一篇具体文章时，我们希望在文章底部或侧边栏展示与该文章关联的所有标签。

你可以在文章详情页对应的模板文件（通常是 archive/detail.html 或自定义的文章模板）中添加以下代码：

<div class="article-tags">
    <h4>文章标签：</h4>
    {% tagList tags %} {# 不指定 itemId，默认获取当前文章的标签 #}
        {% for item in tags %}
            <a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
        {% endfor %}
    {% endtagList %}
    {% empty %} {# 如果文章没有标签，可以显示一个提示 #}
        <span>暂无标签</span>
    {% endtagList %}
</div>

这段代码会遍历当前文章的所有标签，并为每个标签生成一个可点击的链接。你可以通过CSS样式（例如 .tag-item）来美化它们的显示效果。

场景二：在文章列表页为每篇文章显示其标签

在文章列表页（如分类列表页 category/list.html 或首页 index/index.html），我们可能希望在每篇文章的标题或简介下方，简要展示其关联的几个标签。这就需要结合 archiveList 标签和 tagList 标签进行嵌套使用。

{% archiveList archives with type="page" limit="10" %} {# 外部循环：获取文章列表 #}
    {% for archive in archives %}
        <article class="post-item">
            <h3><a href="{{archive.Link}}">{{archive.Title}}</a></h3>
            <p class="post-description">{{archive.Description}}</p>
            <div class="post-meta">
                <span>发布日期：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
                <span class="tags-list">
                    {% tagList tags with itemId=archive.Id limit="3" %} {# 内部循环：获取当前文章的标签，并限制显示3个 #}
                        {% for tag in tags %}
                            <a href="{{tag.Link}}" class="tag-small">{{tag.Title}}</a>
                        {% endfor %}
                    {% empty %}
                        <span></span>
                    {% endtagList %}
                </span>
            </div>
        </article>
    {% endfor %}

    {# 如果需要，这里可以添加分页代码 {% pagination pages with show="5" %}...{% endpagination %} #}
{% endarchiveList %}

在这里，itemId=archive.Id 是关键，它确保了 tagList 每次都获取到 当前遍历到的文章 的标签。通过 limit="3"，我们限制了每篇文章只显示3个标签，保持列表页面的整洁。

场景三：展示全站热门或最新标签列表

网站的侧边栏、页脚或专门的标签归档页通常会显示一个热门标签云或最新标签列表。这时候，我们不关心特定文章的标签，而是希望获取全局的标签数据。

<div class="sidebar-block">
    <h4>热门标签</h4>
    <div class="tag-cloud">
        {% tagList globalTags with itemId="0" limit="20" %} {# itemId="0" 获取全站标签，limit限制数量 #}
            {% for tag in globalTags %}
                <a href="{{tag.Link}}" class="global-tag">{{tag.Title}}</a>
            {% endfor %}
        {% endtagList %}
    </div>
</div>

通过设置 itemId="0"，tagList 就会获取全站的标签列表。你可以根据需要调整 limit 的值，以及通过CSS赋予它们不同的尺寸或颜色，形成一个标签云效果。

内容运营与SEO小贴士

合理地在模板中展示文章标签，不仅能提升网站的用户体验，也能为SEO带来积极影响：

  1. 增强内部链接：每个标签链接都指向一个相关的标签归档页，这为搜索引擎爬虫提供了更多的内部链接，有助于提升网站内容的收录和权重分配。
  2. 改善内容发现：用户可以通过标签快速找到感兴趣的相关主题，增加页面停留时间，降低跳出率。
  3. **明确主题