如何在AnQiCMS模板中实现文章或产品列表的分页功能？
如何在AnQiCMS模板中实现文章或产品列表的分页功能？
对于任何内容管理系统而言，有效管理和展示大量内容都是核心需求。当网站的文章或产品数量日渐增多时，如果没有合理的分页机制，用户在浏览时会感到疲惫，网站的加载速度也可能受到影响。AnQiCMS作为一个高效的内容管理系统，提供了简洁而强大的模板标签，帮助我们轻松实现文章或产品列表的分页功能，从而极大地提升用户体验和网站性能。
在AnQiCMS中实现分页功能主要涉及两个核心模板标签的配合使用：用于获取列表数据的 archiveList（或其他类似的列表标签，如 categoryList、tagDataList）和专门用于生成分页导航的 pagination。理解它们的工作原理和参数设置，是构建流畅分页体验的关键。
第一步：准备列表数据——使用 archiveList 标签
首先，我们需要在模板中调用相应的列表标签来获取文章或产品数据。以最常用的文章或产品列表为例，我们会用到 archiveList 标签。这个标签不仅能查询内容，还能通过特定参数告诉AnQiCMS系统，我们需要对这些内容进行分页处理。
在使用 archiveList 时，有两个关键参数是实现分页不可或缺的：
type="page": 这是最重要的参数，它明确告诉系统，当前这个列表是需要进行分页展示的。如果没有这个参数，archiveList标签将只会获取指定数量的列表数据，而不会提供任何分页信息。limit: 这个参数用来设定每页希望显示的文章或产品数量。例如，limit="10"表示每页显示10条内容。
一个基本的 archiveList 使用示例可能如下，它会获取文章模型（假设 moduleId="1"）下的内容，并为每页10条内容进行分页：
{% archiveList archives with moduleId="1" type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
</a>
</li>
{% empty %}
<li>暂时没有更多内容。</li>
{% endfor %}
{% endarchiveList %}
在这段代码中，archives 是我们自定义的变量名，它将包含当前页的所有文章或产品数据。通过 for 循环遍历 archives，我们可以逐一展示每条内容的标题、链接、简介等信息。{% empty %} 块则提供了一个友好的提示，当没有内容时显示。
第二步：插入分页导航——使用 pagination 标签
在获取了列表数据之后，下一步就是生成用户可点击的分页导航链接。AnQiCMS提供了 pagination 标签来完成这项任务。这个标签能够自动识别 archiveList 生成的分页数据，并渲染出包括首页、上一页、下一页和具体页码在内的导航条。
pagination 标签通常需要配合 show 参数来控制在页面上显示多少个页码按钮。例如，show="5" 表示最多显示5个页码。
pagination 标签会将所有分页相关的信息封装在一个名为 pages 的变量中（这个变量名可以自定义，但通常习惯用 pages）。pages 对象包含了许多有用的属性，例如：
pages.TotalItems: 总内容条数。pages.TotalPages: 总页数。pages.CurrentPage: 当前页码。pages.FirstPage: 首页信息（包含Name和Link）。pages.LastPage: 尾页信息（包含Name和Link）。pages.PrevPage: 上一页信息（包含Name和Link）。pages.NextPage: 下一页信息（包含Name和Link）。pages.Pages: 一个包含中间页码信息的数组，每个元素也包含Name（页码）和Link（链接），以及IsCurrent（是否当前页）布尔值。
一个标准的分页导航结构示例通常会像这样：
<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>
<p>当前第 {{pages.CurrentPage}} 页 / 共 {{pages.TotalPages}} 页 (总共 {{pages.TotalItems}} 条)</p>
{% endpagination %}
</div>
通过检查 IsCurrent 属性，我们可以为当前页码添加特定的CSS样式，例如 active 类，以提供视觉反馈。
第三步：整合到实际模板
将 archiveList 和 pagination 结合起来，我们就可以在实际的模板文件中（例如，文章分类列表页的 article/list.html 或产品列表页的 product/list.html）实现完整的分页功能。通常，列表内容会放在页面的主要区域，而分页导航则置于列表的下方。
<div class="content-list">
{# 第一步：文章或产品列表内容 #}
{% archiveList archives with moduleId="1" type="page" limit="10" %}
{% for item in archives %}
<div class="item">
<a href="{{item.Link}}">
<h2>{{item.Title}}</h2>
<p>{{item.Description}}</p>
<span class="meta">{{item.CreatedTime|stampToDate:"2006-01-02"}} - {{item.Views}} 浏览</span>
</a>
</div>
{% empty %}
<p class="no-content">抱歉，当前分类下还没有内容。</p>
{% endfor %}
{% endarchiveList %}
{# 第二步：分页导航 #}
<div class="pagination-area">
{% pagination pages with show="7" %}
<ul class="pagination-controls">
<li class="{% if pages.FirstPage.IsCurrent %}disabled{% endif %}">
<a href="{{pages.FirstPage.Link}}">首页</a>
</li>
{% if pages.PrevPage %}
<li>
<a href="{{pages.PrevPage.Link}}">上一页</a>
</li>
{% endif %}
{% for pageItem in pages.Pages %}
<li class="{% if pageItem.IsCurrent %}active{% endif %}">
<a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li>
<a href="{{pages.NextPage.Link}}">下一页</a>
</li>
{% endif %}
<li class="{% if pages.LastPage.IsCurrent %}disabled{% endif %}">
<a href="{{pages.LastPage.Link}}">尾页</a>
</li>
</ul>
<p class="pagination-info">当前第 {{pages.CurrentPage}} 页 / 共 {{pages.TotalPages}} 页 (总共 {{pages.TotalItems}} 条)</p>
{% endpagination %}
</div>
</div>
通过上述步骤，我们不仅实现了内容的有效展示，还为用户提供了便捷的导航方式。AnQiCMS的分页功能设计得非常直观，只要掌握了 type="page" 和 pagination 标签的用法，就可以轻松驾驭各类列表的分页需求。