在安企CMS中管理和展示内容,标签(Tag)无疑是一个极为灵活且强大的工具。它能帮助我们对内容进行多维度分类,不仅方便访客查找感兴趣的主题,也能有效提升网站的SEO表现。今天,我们就来深入探讨,如何在您的网站上优雅地显示某个特定标签(Tag)下的所有文档列表。
后台准备:确保标签设置妥当
在开始前端的显示之前,我们需要确保后台的标签设置是完整且规范的。
首先,您可以前往安企CMS后台的内容管理区域,找到文档标签模块。在这里,您可以创建、编辑和管理网站所有的标签。建议您为每个标签设置一个清晰的“标签名称”和有意义的“标签简介”,这有助于优化标签页面的SEO。
其次,在您发布或编辑文档时(无论是文章还是产品),务必在“Tag标签”字段中,为文档添加相关联的标签。您可以选择已有的标签,也可以直接输入新标签。只有文档与标签建立了关联,我们才能在前台将它们有效地聚合起来展示。
核心功能揭秘:理解模板标签的妙用
安企CMS提供了强大而易用的模板标签,让我们能够灵活地在前端调用各种内容。对于标签下的文档列表,我们将主要用到以下几个关键标签:
tagDetail: 用于获取某个特定标签自身的详细信息,比如标签ID、标题、描述和链接等。这在构建标签页的头部信息时非常有用。tagList: 用于获取标签的列表,例如显示某个文档关联的所有标签,或者显示网站所有热门标签。tagDataList: 这正是我们今天的主角!它专门用于获取指定标签下的所有文档列表。
要显示特定Tag下的文档列表,tagDataList标签是不可或缺的。它提供了丰富的参数,让您可以精确控制内容的筛选、排序和展示方式:
tagId: 这是核心参数,用于指定您想要显示哪个标签下的文档。如果您当前就在一个标签详情页面(例如tag/list.html或tag/index.html这样的模板),系统会自动识别当前页面的tagId,此时您可以省略此参数。如果是在其他页面(如首页、分类页等)调用,则需要明确指定tagId。moduleId: 如果您的网站使用了不同的内容模型(如文章模型、产品模型等),可以通过此参数指定只显示特定模型下的文档。例如,moduleId="1"通常用于获取文章模型的文档。type: 这个参数决定了列表的类型。type="list"会简单地列出指定数量的文档,而type="page"则会生成带有分页功能的文档列表。limit: 用于控制每页或每次调用显示的文档数量。比如limit="10"会显示10条文档。order: 定义文档的排序方式,您可以根据发布时间(order="id desc")、浏览量(order="views desc")或后台自定义排序(order="sort desc")等进行设置。siteId: 如果您管理着多个站点,并希望调用其他站点的数据,可以通过此参数指定站点ID。
实战演练:在模板中运用标签显示文档列表
现在,让我们通过具体的代码示例,看看如何在不同场景下运用tagDataList标签。
场景一:在标签列表页(tag/list.html)显示当前标签下的所有文档
当用户点击一个标签后,通常会跳转到一个专门的标签列表页面。在这种页面中,tagDataList标签会自动识别当前页面的标签ID,无需我们手动传入tagId。同时,为了提供更好的用户体验,我们通常会加入分页功能。
假设您的模板文件是 tag/list.html,代码结构可能如下:
”`twig {# 获取当前标签的详细信息,用于页面标题和描述 #} {% tagDetail currentTag with name=“Title” %} {% tagDetail tagDescription with name=“Description” %}
标签: {{currentTag}}
{{tagDescription}}
{# 使用 tagDataList 获取当前标签下的文档列表,并启用分页 #}
{% tagDataList archives with type="page" limit="10" order="id desc" %}
{% for item in archives %}
<article class="document-item">
<h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
{% if item.Thumb %}
<div class="document-thumbnail">
<a href="{{item.Link}}"><img src="{{item.Thumb}}" alt="{{item.Title}}"></a>
</div>
{% endif %}
<p class="document-description">{{item.Description}}</p>
<div class="document-meta">
<span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量: {{item.Views}}</span>
</div>
</article>
{% empty %}
<p>当前标签下暂时没有文档。</p>
{% endfor %}
{% endtagDataList %}
{# 添加分页导航 #}
<div class="pagination-area">
{% pagination pages with show="5" %}
<ul>
{% if pages.FirstPage %}
<li><a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
{% endif %}
{% if pages.PrevPage %}
<li><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
{% endif %}
{% for item in pages.Pages %}
<li><a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}