在网站运营中,尤其是管理大量内容时,文章列表的分页显示是一个不可或缺的功能。它不仅能让用户浏览内容更加便捷,避免单页加载过多数据导致速度变慢,还能提高网站的整体用户体验和SEO友好性。在安企CMS中,实现文章列表的分页显示并灵活控制每页数量,操作起来非常直观。
接下来,我们将一起探索如何在安企CMS的模板中实现文章列表的分页功能,并限制每页显示的文章数量。
高效管理内容:实现文章列表分页
安企CMS提供了强大的模板标签功能,其中archiveList标签是用来获取文章(或其他内容模型)列表的核心。要实现分页,我们首先需要告诉archiveList标签,我们想要的是一个分页列表,而不是简单的固定数量列表。
这可以通过在archiveList标签中设置type="page"参数来实现。例如,在一个分类列表页面(通常对应模板目录中的{模型table}/list.html文件),您可以使用如下方式获取文章列表:
{% archiveList archives with type="page" %}
{% for item in archives %}
<div class="article-item">
<h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
<p>{{item.Description}}</p>
<div class="meta-info">
<span>发布日期:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量:{{item.Views}}</span>
</div>
</div>
{% empty %}
<p>该分类下暂时没有文章。</p>
{% endfor %}
{% endarchiveList %}
在这段代码中,archives是我们定义的变量名,用于存储获取到的文章列表数据。type="page"参数告知系统,这个列表需要支持分页。for item in archives则遍历每一篇文章,并显示其标题、描述、发布日期和阅读量等信息。empty标签是一个非常实用的特性,当列表为空时,它会显示备用内容,避免页面空白。
精细控制:限制每页文章数量
当type="page"启用分页功能后,我们还需要一个参数来控制每页显示的文章数量,这就是limit参数。limit参数允许您设置一个整数值,来精确定义每页呈现的文章条数。
例如,如果您希望每页显示10篇文章,可以在archiveList标签中添加limit="10":
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
<p>{{item.Description}}</p>
<div class="meta-info">
<span>发布日期:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量:{{item.Views}}</span>
</div>
</div>
{% empty %}
<p>该分类下暂时没有文章。</p>
{% endfor %}
{% endarchiveList %}
通过调整limit的值,您可以轻松地控制每页内容的密度,以适应不同的设计风格或用户阅读习惯。例如,博客文章列表可能希望每页多显示一些(如15-20篇),而产品展示列表可能需要更少的数量以突出每个产品的细节(如6-8个)。
导航与用户体验:实现分页控制
仅仅显示文章列表和限制数量还不够,用户还需要一个直观的分页导航来切换页面。安企CMS为此提供了专门的pagination标签。这个标签能够自动根据当前的URL和archiveList生成的分页信息,渲染出完整的“首页”、“上一页”、“下一页”、“尾页”以及中间的页码链接。
pagination标签通常与archiveList标签一起使用,并且需要定义一个变量名来接收分页数据,例如pages。其中一个常用参数是show,它可以控制中间页码区域最多显示多少个页码按钮。
以下是一个完整的分页导航代码示例:
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination-list">
{# 首页链接 #}
<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 item in pages.Pages %}
<li class="page-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{item.Link}}">{{item.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>
<div class="pagination-info">
总共 <b>{{pages.TotalItems}}</b> 篇文章,当前第 <b>{{pages.CurrentPage}}</b> 页 / 共 <b>{{pages.TotalPages}}</b> 页
</div>
{% endpagination %}
</div>
在上述代码中,pages变量包含了所有与分页相关的信息,例如pages.FirstPage.Link获取首页的链接,pages.CurrentPage表示当前页码。IsCurrent属性是一个非常方便的布尔值,当某个页码是当前页面时,它会返回true,这允许您通过CSS为其添加active类,从而高亮显示当前页码,提升用户体验。
综合实践:完整的文章列表分页代码
将archiveList和pagination标签结合起来,您就可以在安企CMS中实现一个功能完善且易于管理的文章列表分页。通常,这些代码会放置在您网站模板中的{模型table}/list.html文件内,例如article/list.html。
以下是一个整合后的示例:
”`twig {# 假设这是文章分类列表页的模板文件,如:/template/default/article/list.html #}
{% extends ‘bash.html’ %} {# 继承基础布局文件 #}
{% block content %}
<h1 class="mb-4">
{% categoryDetail with name="Title" %}
</h1>
<div class="article-list-wrapper">
{% archiveList archives with type="page" limit="10" %} {# 获取分页文章列表,每页10篇 #}
{% for item in archives %}
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
<a href="{{item.Link}}">{{item.Title}}</a>
</h5>
<p class="card-text">{{item.Description}}</p>
<p class="card-text-sm text-muted">
<small>发布日期:{{stampToDate(item.CreatedTime, "2006-01-02")}}</small>
<small class="ms-3">阅读量:{{item.Views}}</small>
</p>
</div>
</div>
{% empty %}
<div class="alert alert-info" role="alert">
该分类下暂时没有文章。
</div>
{% endfor %}
{% endarchiveList %}
</div>
{# 分页导航区域 #}
<nav aria-label="Page navigation" class="mt-4">
{% pagination pages with show="5" %} {# 显示5个页码按钮 #}
<ul class="pagination justify-content-center">
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.FirstPage.Link}}" aria-label="首页">首页</a>
</li>
{% if pages.PrevPage %}
<li class="page-item">
<a class="page-link" href="{{pages.PrevPage.Link}}" aria-label="上一页">上一页</a>
</li>
{% endif %}
{% for item in pages.Pages %}
<li class="page-item {% if item.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li class="page-item">
<a class="page-link" href="{{pages.NextPage.Link}}" aria-label="下一页">下一页</a>
</li>
{% endif %}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.Last