如何在安企CMS中实现文章列表的分页显示？
在内容管理系统中，文章列表的分页显示是一项基本而重要的功能。它不仅能有效管理大量内容，提升网站的加载速度，避免用户面对无限滚动的页面而感到疲惫，更是搜索引擎优化（SEO）的关键一环，帮助搜索引擎更好地抓取和索引网站内容。对于使用安企CMS（AnQiCMS）的用户来说，实现文章列表的分页功能，得益于其灵活且类似Django的模板引擎，过程直观且强大。
安企CMS的模板系统为我们提供了两个核心标签，它们是实现文章列表分页的基石：archiveList（用于获取文章数据）和 pagination（用于生成分页导航）。接下来，我们将详细探讨如何利用这两个标签，在您的网站上优雅地实现分页效果。
一、理解文章列表数据的获取：archiveList 标签
archiveList 标签是安企CMS中用来查询和展示文章列表的主要工具。要实现分页，我们需要特别关注它的几个参数：
type="page"：这是实现分页的关键指令。当您将type参数设置为"page"时，archiveList标签就会自动启用分页模式，并将当前页面的分页信息（如当前页码、总页数等）传递给模板上下文，供pagination标签使用。limit：这个参数用于控制每页显示的文章数量。例如，limit="10"意味着每页将展示10篇文章。moduleId和categoryId：如果您想获取特定内容模型（如“文章模型”或“产品模型”）或特定分类下的文章，可以使用这两个参数进行筛选。q(搜索关键词)：如果您的文章列表需要支持关键词搜索功能，并且搜索结果也要分页，archiveList标签会自动处理URL中的q参数，将搜索结果进行分页显示。
通过组合这些参数，archiveList 能够灵活地获取您需要展示的文章数据。例如，获取“文章模型”下，每页显示10篇文章并支持分页的文章列表，可以这样写：
{% archiveList archives with moduleId="1" type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<div>{{item.Description}}</div>
<div>
<span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>{{item.Views}} 阅读</span>
</div>
</a>
{% if item.Thumb %}
<a href="{{item.Link}}">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
</li>
{% empty %}
<li>
当前分类下暂无文章。
</li>
{% endfor %}
{% endarchiveList %}
在上面的代码中，我们使用 archiveList 获取了文章数据，并通过 for 循环遍历 archives 变量，展示每篇文章的标题、描述、分类、发布日期、浏览量和缩略图。{% empty %} 块则处理了列表为空的情况。
二、构建分页导航：pagination 标签
在 archiveList 标签启用 type="page" 后，页面上下文会自动包含一个 pages 对象，这个对象包含了所有与分页相关的信息。pagination 标签的作用就是利用这个 pages 对象，生成一套完整且可交互的分页导航。
pagination 标签的核心参数是 show，它用来控制在分页导航中，除了“首页”、“上一页”、“下一页”、“末页”之外，中间区域显示多少个相邻的页码按钮。例如，show="5" 会显示当前页码左右各2个，总计5个页码。
以下是 pagination 标签的常用结构及其 pages 对象中包含的关键属性：
pages.TotalItems：总文章数量。pages.TotalPages：总页数。pages.CurrentPage：当前页码。pages.FirstPage：首页信息（包含Name和Link属性，以及IsCurrent判断是否为当前页）。pages.PrevPage：上一页信息（同样包含Name、Link、IsCurrent）。pages.NextPage：下一页信息。pages.LastPage：末页信息。pages.Pages：一个数组，包含了中间部分的页码按钮信息，每个元素都有Name、Link、IsCurrent属性。
您可以通过遍历 pages.Pages 数组，并结合 if 语句判断 IsCurrent 属性来高亮显示当前页，从而构建一个完整的分页导航。
{# 分页代码 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination">
{# 首页按钮 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{# 上一页按钮 #}
{% if pages.PrevPage %}
<li class="page-item">
<a class="page-link" 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 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}}">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
{# 末页按钮 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
在这个分页代码块中，我们首先使用 {% pagination pages with show="5" %} 来初始化分页数据。然后，根据 pages 对象中的属性，逐一构建“首页”、“上一页”、“中间页码”、“下一页”和“末页”链接。通过 {% if item.IsCurrent %} 判断当前页，并为其添加 active 类，以便通过CSS进行高亮显示。
三、整合：一个完整的分页列表示例
将 archiveList 和 pagination 标签结合起来，通常放置在文章列表页模板（例如 archive/list.html 或 category/list.html）中，便能实现动态的文章分页功能。
”`twig <!DOCTYPE html>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<style>
.article-list { list-style: none; padding: 0; }
.article-list li { margin-bottom: 15px