如何在安企CMS中实现分页功能，并自定义页码的显示样式？
在安企CMS中，网站内容的分页功能是提升用户体验、优化站点结构不可或缺的一部分。无论是博客文章列表、产品展示页还是其他动态内容，合理的分页能让用户更方便地浏览大量信息，也能帮助搜索引擎更好地理解和抓取网站内容。今天，我们就来深入了解如何在AnQiCMS中实现分页功能，并按自己的需求定制页码的显示样式。
为什么需要分页？
想象一下，您的网站上有成百上千篇精彩的文章。如果没有分页，所有文章会堆积在一个页面上，不仅加载缓慢，用户也难以找到他们感兴趣的内容，从而很快离开。分页的作用就在于将这些内容合理地拆分成多个小页面，让页面加载更快，导航更清晰，用户体验自然也会更好。同时，对于搜索引擎优化（SEO）来说，清晰的分页结构也有助于搜索引擎理解网站内容的层次，提高收录效率。
AnQiCMS如何实现分页
AnQiCMS提供了一套直观且灵活的模板标签来处理内容列表和分页显示。核心在于两个标签的配合使用：内容列表标签（如archiveList）和分页标签（pagination）。
第一步：准备需要分页的内容列表
在您的模板文件中（例如 list.html 或 index.html），首先需要使用内容列表标签来获取需要分页的内容。这里我们以获取文章列表为例，使用 archiveList 标签。关键在于设置 type="page" 参数，这会告诉AnQiCMS准备好为这个列表生成分页数据。同时，通过 limit 参数来控制每页显示多少条内容。
一个典型的内容列表获取方式可能如下：
{# 假设我们正在获取ID为1的文章分类下的内容，每页显示10条 #}
{% archiveList archives with categoryId="1" type="page" limit="10" %}
<div class="article-list">
{% for item in archives %}
<div class="article-item">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description}}</p>
<div class="meta">
<span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</div>
</div>
{% empty %}
<p>抱歉，目前该分类下没有任何文章。</p>
{% endfor %}
</div>
{% endarchiveList %}
在上面的代码中，archives 是我们定义的变量，它包含了当前页的所有文章数据。type="page" 是启用分页的关键，limit="10" 则指定了每页展示10篇文章。
第二步：插入分页标签并理解其提供的变量
在内容列表的下方，紧接着使用 pagination 标签来渲染分页导航。这个标签会根据之前 archiveList 生成的分页数据，自动输出页码信息。
<div class="pagination-container">
{% pagination pages with show="5" %}
{# 在这里构建您的分页样式 #}
{% endpagination %}
</div>
这里的 pages 也是一个自定义的变量名，它包含了所有与分页相关的数据。show="5" 这个参数表示在当前页码前后最多显示5个页码按钮，让分页导航看起来更简洁。
pages 变量提供了丰富的数据，让您可以灵活地定制分页样式：
pages.TotalItems: 内容总条数。pages.TotalPages: 总页码数。pages.CurrentPage: 当前页码。pages.FirstPage: 首页对象，包含Name（如“首页”或“1”）、Link（链接地址）和IsCurrent（是否当前页）。pages.LastPage: 末页对象，结构与FirstPage类似。pages.PrevPage: 上一页对象，结构与FirstPage类似，如果当前是第一页，则为空。pages.NextPage: 下一页对象，结构与FirstPage类似，如果当前是最后一页，则为空。pages.Pages: 一个数组，包含了中间的页码列表，每个元素都是一个对象，同样包含Name（页码数字）、Link和IsCurrent。
第三步：自定义页码的显示样式
有了 pages 变量提供的这些数据，您就可以利用HTML和CSS来构建任何您想要的分页样式了。通常，我们会使用 for 循环遍历 pages.Pages 来显示中间页码，并结合 if 语句来判断当前页、首页、末页、上一页和下一页的状态，添加不同的CSS类。
下面是一个常用的分页样式代码示例，您可以根据自己的网站设计修改其中的HTML结构和CSS类名：
{# 假设我们已经通过 archiveList 获取了内容，现在开始渲染分页 #}
<div class="pagination-wrapper">
{% pagination pages with show="5" %}
<ul class="pagination">
{# 显示总页数和当前页码信息，这部分您可以选择显示或隐藏 #}
<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}}" class="page-link">{{pages.FirstPage.Name}}</a>
</li>
{# 上一页链接 #}
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{pages.PrevPage.Link}}" class="page-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}}" class="page-link">{{item.Name}}</a>
</li>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{pages.NextPage.Link}}" class="page-link">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
{# 末页链接 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}" class="page-link">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
通过为 li 或 a 标签添加 active、disabled 等CSS类，您就可以在您的样式表（例如 public/static/css/style.css）中定义它们的视觉表现，例如改变背景色、字体颜色等，从而实现完全符合您网站风格的分页样式。
综合示例：文章列表与分页
将上述两个部分结合起来，一个完整的文章列表页面的分页功能就实现了。
”`twig <!DOCTYPE html>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">
<style>
/* 简单的分页样式示例，您可以根据需要进行扩展和修改 */
.pagination-wrapper {
margin-top: 30px;
text-align: center;
}
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination > li {