安企CMS 为内容的组织提供了非常灵活且强大的工具,其中标签(Tag)就是一种非常直观且高效的利器。通过合理使用标签,不仅能帮助我们更好地管理网站内容,还能显著提升用户体验和搜索引擎优化(SEO)效果。接下来,我们就来一起看看如何在安企CMS中显示文章标签列表,以及每个标签下的相关文章。
第一步:在后台管理和创建标签
在使用标签前,首先需要确保我们的网站内容已经妥善地添加了标签。在安企CMS的后台,我们可以通过“内容管理”找到“文档标签”功能。在这里,您可以方便地新增、编辑或删除标签。每个标签都可以设置其名称、索引字母、自定义URL,以及用于SEO的标题、关键词和描述。
当您在发布或编辑文档时,只需在“Tag标签”字段中输入或选择已有的标签,即可将该文档与相应的标签关联起来。安企CMS的标签设计非常灵活,它不区分内容模型和分类,这意味着您可以将不同类型(如文章、产品)和不同分类下的文档,通过同一个标签关联起来,实现跨内容主题的整合。
第二步:展示全站标签列表
我们常常需要在网站的首页、侧边栏或专门的“标签云”页面上,展示网站中所有的热门或重要的标签,引导用户发现更多感兴趣的内容。
要实现这一点,我们可以使用安企CMS内置的 tagList 标签。这个标签能够帮助我们获取标签数据,然后通过模板循环展示出来。
假设我们希望在网站的某个区域展示最多20个标签,并且这些标签链接到各自的文章列表页,我们可以这样编写模板代码:
<div class="tag-list-section">
<h3>热门标签</h3>
<ul>
{% tagList tags with limit="20" itemId="0" %}
{% for item in tags %}
<li>
<a href="{{item.Link}}" title="{{item.Title}}">{{item.Title}}</a>
</li>
{% endfor %}
{% empty %}
<li>暂时没有可显示的标签。</li>
{% endendtagList %}
</ul>
</div>
这里,tagList 标签后的 tags 是我们为标签列表数据起的变量名。limit="20" 限制了显示标签的数量。itemId="0" 是一个关键参数,它告诉系统我们要获取“所有”标签,而不是与某个特定文档关联的标签。
如果这个列表是网站“标签首页”(通常对应 tag/index.html 模板)的一部分,并且我们希望标签本身也支持分页显示,那么可以在 tagList 标签中加入 type="page" 参数,并配合 pagination 标签使用:
<div class="all-tags-page">
<h1>全部标签</h1>
{% tagList tags with type="page" limit="50" itemId="0" %}
<ul>
{% for item in tags %}
<li><a href="{{item.Link}}">{{item.Title}}</a></li>
{% endfor %}
</ul>
{% endtagList %}
{# 分页代码 #}
<div class="pagination">
{% pagination pages with show="5" %}
{% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
{% for pageItem in pages.Pages %}
<a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
{% endfor %}
{% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
{% endpagination %}
</div>
</div>
第三步:展示单篇文章的关联标签
当用户阅读一篇具体文章时,我们通常会希望在文章的详情页面(例如 archive/detail.html 模板)显示与该文章直接关联的标签。这有助于用户快速了解文章主题,并发现相关内容。
在这种场景下,我们仍然使用 tagList 标签,但无需指定 itemId 参数。系统会自动识别当前页面是文章详情页,并获取与当前文章关联的标签:
<article>
<!-- 文章内容区域 -->
<div class="article-content">
<!-- ... 文章标题、正文等 ... -->
</div>
<div class="article-tags">
<strong>相关标签:</strong>
{% tagList tags %}
{% for item in tags %}
<a href="{{item.Link}}" class="tag-item" title="{{item.Title}}">{{item.Title}}</a>
{% endfor %}
{% empty %}
<span>暂无标签</span>
{% endendtagList %}
</div>
<!-- ... 上一篇/下一篇、相关文章等 ... -->
</article>
通过这样的方式,每篇文章下方都会展示它所关联的标签,点击即可跳转到该标签下的文章列表。
第四步:展示特定标签下的文章列表
标签的最终目的是为了通过某个主题将相关文章聚合起来,形成一个内容专题页面。当用户点击一个标签时,应该能够看到所有带有该标签的文章列表。这通常对应 tag/list.html 模板。
要实现特定标签下的文章列表,我们需要用到 tagDataList 标签。这个标签专门用于获取指定标签下的所有文档。
以下是在 tag/list.html 模板中展示特定标签文章列表的示例代码:
”`twig
{# 获取当前标签的详细信息,例如标题 #}
{% tagDetail currentTag with name="Title" %}
<h1>标签:{{currentTag}}</h1>
<div class="tag-description">
{# 获取并显示标签的描述信息 #}
{% tagDetail tagDesc with name="Description" %}
{% if tagDesc %}
<p>{{tagDesc}}</p>
{% endif %}
</div>
<ul class="article-list">
{% tagDataList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}" class="