在安企CMS的日常内容管理中,我们常常需要对网站内容进行更灵活的组织和展示。除了传统的分类系统,标签(Tag)为我们提供了另一种强大的内容关联方式。它能将不同分类但主题相近的文档聚合在一起,为用户带来更聚焦的浏览体验。今天,我们就来深入了解安企CMS中一个非常实用的模板标签——tagDataList,看看它如何帮助我们显示特定标签下的所有相关文档列表,并轻松实现分页。
tagDataList:标签文档列表的核心
想象一下,您的读者在浏览了某篇文章后,对文章中提到的某个特定主题(标签)产生了浓厚兴趣,希望能看到更多关于这个主题的内容。这时,一个设计完善的标签页就显得尤为重要。tagDataList标签正是为此而生,它能够精准地抓取与特定标签关联的所有文档,并将它们呈现在用户面前。
基本使用:快速获取标签文档
如果您正在开发一个标签详情页,tagDataList的默认用法非常简洁。系统会智能地识别当前页面的标签ID,并自动加载该标签下的文档:
{% tagDataList archives %}
{# 循环遍历当前标签下的所有文档 #}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
</a>
</li>
{% empty %}
<li>
哎呀,这个标签下暂时没有找到相关文档哦!
</li>
{% endfor %}
{% endtagDataList %}
在上面的代码中,archives是我们自定义的变量名,它将承载从tagDataList获取到的文档列表。在循环体内部,每个item都代表一篇文档,我们可以调用其Title、Link、Description等常用字段来展示内容。
当然,如果您想在非标签页或者需要指定其他标签的文档列表,可以使用tagId参数明确指定标签ID:
{# 获取ID为5的标签下的文档列表 #}
{% tagDataList archives with tagId="5" %}
{# ... 遍历文档内容 ... #}
{% endtagDataList %}
结合分页:实现标签文档列表的分页浏览
对于内容丰富的标签,一次性展示所有文档显然是不现实的,这时分页功能就变得不可或缺。安企CMS的tagDataList标签完美支持分页,让您的标签页既美观又实用。
要实现分页,tagDataList标签需要搭配type='page'参数来使用,告诉系统我们需要一个可分页的列表。同时,通过limit参数设定每页显示多少条文档。分页功能的另一半,则由pagination标签来完成,它负责生成页码导航。
下面是一个完整的示例,展示如何在标签页显示带有分页的文档列表:
{# tagDataList 标签,设置为分页模式,并指定每页10条文档 #}
{% tagDataList archives with type="page" limit="10" %}
{# 循环遍历当前页的文档 #}
{% for item in archives %}
<div class="document-item">
<a href="{{item.Link}}" class="document-link">
<h5 class="document-title">{{item.Title}}</h5>
<p class="document-description">{{item.Description}}</p>
<div class="document-meta">
<span>发布于:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读:{{item.Views}}次</span>
</div>
</a>
{% if item.Thumb %}
<div class="document-thumb">
<a href="{{item.Link}}">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
</div>
{% endif %}
</div>
{% empty %}
<div class="empty-state">
哎呀,这个标签下暂时没有找到相关文档哦!
</div>
{% endfor %}
{% endtagDataList %}
{# 分页导航标签,'pages'是tagDataList传递过来的分页对象 #}
<div class="pagination-area">
{% pagination pages with show="5" %}
{# 首页链接,如果当前页是首页,添加'current'类名 #}
<a class="pagination-link {% if pages.FirstPage.IsCurrent %}current{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
{# 上一页链接,只有存在上一页时才显示 #}
{% if pages.PrevPage %}
<a class="pagination-link" href="{{pages.PrevPage.Link}}">上一页</a>
{% endif %}
{# 中间页码链接,遍历pages.Pages数组生成每个页码链接 #}
{% for item in pages.Pages %}
<a class="pagination-link {% if item.IsCurrent %}current{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}
{# 下一页链接,只有存在下一页时才显示 #}
{% if pages.NextPage %}
<a class="pagination-link" href="{{pages.NextPage.Link}}">下一页</a>
{% endif %}
{# 尾页链接,如果当前页是尾页,添加'current'类名 #}
<a class="pagination-link {% if pages.LastPage.IsCurrent %}current{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
{% endpagination %}
</div>
在这个例子中,tagDataList将type设置为"page",并用limit="10"指定每页显示10条文档。而pagination标签则负责接收tagDataList传递的分页数据(我们在这里命名为pages),并根据show="5"参数生成一个包含5个页码的导航条,同时自动判断当前页并添加current类名,方便您进行样式