AnQiCMS中，如何在文章列表页实现动态分页并控制每页显示数量？
在安企CMS中管理网站内容，文章列表页通常是用户浏览信息的主要入口之一。为了提供更流畅的用户体验并优化页面加载性能，实现动态分页和灵活控制每页显示数量显得尤为重要。安企CMS提供了强大且易于使用的模板标签，让我们可以轻松实现这些功能。
核心概念：动态分页与每页数量控制的基石
在安企CMS中，实现文章列表的动态分页主要依赖于两个核心模板标签：
archiveList标签：负责从数据库中获取符合条件的文章数据。通过设定其type="page"参数，我们可以告诉系统为这些文章数据生成分页所需的信息。同时，limit参数则直接控制了每页显示的文章数量。pagination标签：这个标签的作用是根据archiveList生成的分页数据，构建并显示出实际的分页导航链接，例如“上一页”、“下一页”以及具体的页码数字。
这两个标签协同工作，使得文章列表不仅能显示数据，还能根据页码请求动态加载不同页的内容，并让用户直观地进行页面跳转。
准备工作：理解模板结构
在安企CMS中，文章列表页的模板文件通常位于您当前使用模板包的相应目录下。根据系统约定，这些文件可能命名为 {模型table}/list.html 或更具体的 {模型table}/list-{分类ID}.html。例如，如果您在文章模型下创建了一个名为“新闻”的分类，那么其列表页模板可能是 article/list.html 或 article/list-新闻分类ID.html。理解这些模板文件的位置，有助于您精准地修改和添加分页逻辑。
第一步：获取文章列表数据（archiveList标签）
首先，我们需要在模板中调用 archiveList 标签来获取文章数据。这个标签的功能非常灵活，可以根据多种条件筛选文章。
要实现分页，关键在于为 type 参数赋值为 "page"。而 limit 参数则用于设置每页希望显示的文章数量。例如，如果您希望每页显示10篇文章，可以这样设置：
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量：{{item.Views}}</span>
</a>
</li>
{% empty %}
<li>暂无文章内容。</li>
{% endfor %}
{% endarchiveList %}
在上面的代码中：
archives是我们自定义的一个变量名，用于存储获取到的文章列表数据。type="page"明确告知系统，这是一次分页查询，系统会同时准备分页所需的数据。limit="10"设置了每页显示10篇文章。您可以根据需要调整这个数字。{% for item in archives %}循环遍历并显示每篇文章的标题、描述、发布日期和浏览量等信息。
除了 type 和 limit，archiveList 标签还支持许多其他有用的参数，例如 moduleId（指定模型ID）、categoryId（指定分类ID）、order（指定排序方式，如 id desc 按ID倒序）、q（根据URL中的搜索关键词自动筛选）等，这些参数都可以帮助您构建更精细化的文章列表。
第二步：构建分页导航（pagination标签）
在 archiveList 标签生成了分页数据之后，我们就可以使用 pagination 标签来渲染分页导航了。这个标签会接收 archiveList 内部生成的分页信息，并将其转化为用户友好的链接集合。
<div class="pagination-controls">
{% pagination pages with show="5" %}
<ul>
<li>共计：{{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 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>
{% endpagination %}
</div>
在上述代码中：
pages是一个自定义变量名，用于接收pagination标签提供给我们的分页对象。show="5"参数控制了分页导航中一次性显示多少个页码数字（不包括“首页”、“上一页”等）。您可以根据页面布局调整这个值。pages对象包含了丰富的分页信息，如TotalItems（总记录数）、TotalPages（总页数）、CurrentPage（当前页码）以及指向各个分页链接的子对象 (FirstPage,PrevPage,NextPage,LastPage) 和页码数组 (Pages)。通过遍历这些子对象和数组，您可以灵活地构建出各种样式的分页导航。
整合实践：完整代码示例
将上述两个标签结合起来，一个具备动态分页和每页数量控制的文章列表页就基本完成了。完整的模板代码大致如下：
”`twig {# article/list.html 或其他文章列表模板文件 #} <!DOCTYPE html>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %} - 文章列表</title>
<style>
.article-list ul { list-style: none; padding: 0; }
.article-list li { margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px; }
.article-list li a { text-decoration: none; color: #333; display: block; }
.article-list li h5 { font-size: 18px; margin-bottom: 5px; }
.article-list li p { font-size: 14px; color: #666; margin-bottom: 5px; }
.article-list li span { font-size: 12px; color: #999; margin-right: 10px; }
.pagination-controls ul { list-style: none; padding: 0; display: flex; justify-content: center; margin-top: 20px; }
.pagination-controls li { margin: 0 5px; }
.pagination-controls li a { display: block; padding: 8px 12px; border: 1px solid #ddd; text-decoration: none; color: #333; border-radius: 4px; }
.pagination-controls li.active a, .pagination-controls li a:hover { background-color: #007bff; color: #fff; border-color: #007bff; }
</style>
<div class="container">
<h1>最新文章</h1>
<div class="article-list">
<ul>
{% archiveList archives with type="page" limit="10" moduleId="1" order="id desc" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量：{{item.Views}}</span>
</a>
</li>
{% empty %}
<li>暂无文章内容。</li>
{% endfor %}
{% endarchiveList %}
</ul>