在安企CMS中,内容列表的分页显示是提升用户体验、优化网站性能以及方便内容管理的关键功能之一。安企CMS凭借其灵活的模板标签和强大的内容管理能力,为我们提供了简单而高效的方式来实现这一需求。
内容列表分页显示的重要性
想象一下,如果您的网站有成千上万篇文章、产品或评论,而它们都显示在一个页面上,这不仅会让页面加载速度奇慢无比,还会让用户在浩瀚的信息中迷失方向。分页显示则能够将大量内容合理地拆分成多个页面,大大减轻了单个页面的负担,优化了加载速度,同时也让用户能够按需浏览,提升了整体的用户体验。对于搜索引擎而言,清晰的分页结构也有助于其更好地理解和索引网站内容。
安企CMS的模板引擎设计得直观易用,它采用了类似Django模板引擎的语法,通过特定的标签({% tag %})来处理逻辑,并使用双花括号({{ variable }})来输出变量,这使得即使是不具备深厚开发背景的用户也能快速上手。
核心标签:archiveList 与 pagination
在安企CMS中,实现内容列表分页显示主要依赖于两个核心模板标签:
archiveList文档列表标签:用于获取和展示文档内容列表。pagination分页标签:用于渲染分页导航链接,让用户可以在不同页面之间跳转。
下面,我们将一步步介绍如何结合这两个标签来实现内容列表的分页显示。
第一步:使用 archiveList 标签获取分页数据
archiveList 标签是您获取文章、产品等内容列表的主要工具。要实现分页,您需要通过其 type 和 limit 参数来指定分页行为:
type="page":这个参数是告诉安企CMS,您希望获取的数据是一个可以进行分页的列表。系统会根据当前页面URL中的页码参数(例如?page=2)自动调整返回的数据。limit="N":这个参数则定义了每页显示多少条内容。例如,limit="10"意味着每页显示10条内容。
以下是一个基本的 archiveList 标签使用示例,用于获取文章模型(moduleId="1")下的内容列表,并准备进行分页,每页显示10条:
{% archiveList archives with type="page" moduleId="1" limit="10" %}
{% for item in archives %}
<div class="article-item">
<h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
<p class="summary">{{ item.Description }}</p>
<div class="meta">
<span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>阅读量: {{ item.Views }}</span>
<span>分类: <a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
</div>
</div>
{% empty %}
<p>抱歉,当前分类或搜索条件下暂无内容。</p>
{% endfor %}
{% endarchiveList %}
在上面的代码中:
archives是您自定义的变量名,用于存储获取到的文档列表。moduleId="1"表示获取ID为1的文章模型下的内容。您可以根据自己的内容模型ID进行调整。item.Link、item.Title、item.Description等是archives列表中每个文档项的常用属性。您还可以访问item.Views(浏览量)、item.Thumb(缩略图)等更多属性。
第二步:使用 pagination 标签渲染分页导航
在 archiveList 标签之后,您需要使用 pagination 标签来生成分页导航条。这个标签会自动处理当前页码、总页数以及生成正确的页码链接等复杂逻辑。
show="N":这个参数用于控制在分页导航条上,除了首页、末页、上一页、下一页外,最多显示多少个页码数字。例如,show="5"会在导航中显示当前页附近5个页码。
以下是一个标准且功能完善的 pagination 标签使用示例:
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul>
<li class="info">总共:{{ pages.TotalItems }} 条内容,{{ pages.TotalPages }} 页,当前第 {{ pages.CurrentPage }} 页</li>
{# 首页链接 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
</li>
{# 上一页链接 #}
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
</li>
{% endif %}
{# 中间页码链接 #}
{% for pageItem in pages.Pages %}
<li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
<a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
</li>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
</li>
{% endif %}
{# 末页链接 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
</li>
</ul>
{% endpagination %}
</div>
在上述代码中:
pages是pagination标签生成的变量,包含了所有分页相关的数据。pages.TotalItems、pages.TotalPages、pages.CurrentPage分别表示总条数、总页数和当前页码。pages.FirstPage、pages.PrevPage、pages.NextPage、pages.LastPage都是对象,包含Name(链接文本,如“首页”、“上一页”)和Link(跳转链接)。pages.Pages是一个数组,包含了中间部分的页码,您需要通过for循环遍历它来显示每个页码。pageItem.IsCurrent可以判断当前页码是否为当前页面,方便您添加高亮样式。
组合示例:完整的分页显示代码
将上述两个标签结合起来,您就可以在安企CMS的模板中实现一个完整的内容列表分页显示功能。通常,这样的代码会放在分类列表页 ({模型table}/list.html) 或搜索结果页 (search/index.html) 等模板中。
”`twig <!DOCTYPE html>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %} - {% system with name="SiteName" %}</title>
<style>
/* 简单的分页样式,您可以根据网站设计自由调整 */
.pagination-container ul {
list-style: none;
padding: 0;
display: flex;
justify-content