在网站内容日益丰富的今天，如何高效地展示大量文章，同时确保用户浏览体验的流畅性，是每一个网站运营者需要思考的问题。安企CMS（AnQiCMS）提供了强大且灵活的文章列表分页功能，不仅能帮助网站优化内容呈现，还能通过自定义样式和页码数量，更好地融入网站整体设计，提升用户交互体验。
接下来，我们将深入探讨如何在安企CMS中实现文章列表的分页显示，并详细讲解如何根据您的需求自定义分页导航的样式和页码数量。
一、实现文章列表的分页显示
在安企CMS中，要对文章列表进行分页显示，核心在于使用模板标签 archiveList 来获取数据，并指定其为分页模式。
首先，您需要在模板文件中（通常是列表页模板，如 {模型table}/list.html 或自定义的列表模板）使用 archiveList 标签来检索文章数据。这个标签非常灵活，可以根据分类ID、模型ID、推荐属性等多种条件来筛选文章。
关键在于为 archiveList 标签设置 type="page" 参数。一旦设置了这个参数，安企CMS就会自动处理当前页面的分页逻辑，根据您指定的 limit 参数（每页显示的文章数量）来返回当前页的文章数据。
例如，如果您想在当前分类下显示每页10篇文章，可以这样编写代码：
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
<h4>{{item.Title}}</h4>
<p>{{item.Description}}</p>
<div class="meta">
<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 src="{{item.Thumb}}" alt="{{item.Title}}">
</a>
{% endif %}
</div>
{% empty %}
<p>抱歉，当前分类暂无文章。</p>
{% endfor %}
{% endarchiveList %}
在这段代码中：
archiveList archives with type="page" limit="10"会获取当前页码对应的10篇文章，并将结果存储在archives变量中。{% for item in archives %}循环遍历这些文章，item变量包含了每篇文章的详细信息，如标题 (item.Title)、链接 (item.Link)、描述 (item.Description) 等。{% empty %}块用于在没有任何文章数据时显示一条友好提示，避免页面空白。
通过这种方式，您已经成功地让文章列表进入了分页模式。接下来，我们需要为用户提供导航到不同页码的工具。
二、渲染分页导航
文章列表数据准备好后，就需要使用 pagination 标签来生成并显示分页导航。pagination 标签通常紧随 archiveList 标签之后使用，它会根据 archiveList 提供的分页信息，自动生成页码链接和导航按钮。
pagination 标签会将分页数据组织成一个 pages 对象，这个对象包含了当前分页状态的各种有用信息，如总文章数、总页数、当前页码、首页链接、上一页链接、下一页链接、尾页链接以及一个包含所有可见页码的数组。
一个基础的分页导航实现可能看起来像这样：
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul>
{# 首页按钮 #}
<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.TotalItems}} 篇文章，分为 {{pages.TotalPages}} 页，当前在第 {{pages.CurrentPage}} 页。</p>
{% endpagination %}
</div>
在这段代码中：
{% pagination pages with show="5" %}告诉系统生成分页导航，并将分页数据存储在pages变量中。show="5"参数在这里起到了关键作用，它表示在页码列表中，除了首页、尾页、上一页、下一页按钮外，最多只显示5个中间页码（例如，当总页数很多时，会显示1...3 4 5 6 7...100）。pages.FirstPage、pages.PrevPage、pages.NextPage、pages.LastPage分别代表首页、上一页、下一页和尾页的对象，它们的Link属性提供了对应的链接，Name属性提供了按钮文本。pages.Pages是一个数组，包含了中间的页码项。通过{% for item in pages.Pages %}循环遍历，item.Link提供页码链接，item.Name提供页码数字。item.IsCurrent或pages.FirstPage.IsCurrent等布尔值可以判断当前页码是否为当前正在浏览的页面，这对于高亮显示当前页码至关重要。
三、自定义分页导航的样式和页码数量
安企CMS的分页标签提供了足够的灵活性，让您可以通过控制标签参数和搭配CSS来实现完全自定义的样式。
1. 自定义页码数量：
如前所述，pagination 标签的 show 参数直接控制了中间页码按钮的数量。
show="5"：最多显示5个中间页码。show="7"：最多显示7个中间页码。 您可以根据页面布局的宽度、用户习惯等因素，调整这个数值，以达到**显示效果。如果省略show参数，系统会有一个默认值，但为了精确控制，建议明确设置。
2. 自定义分页导航样式： 通过在HTML结构中添加自定义的CSS类，您可以完全掌控分页导航的视觉呈现。
在上面的示例中，我们使用了 pagination-container、page-item 和 active 等类名。您可以在您的CSS文件中为这些类编写样式规则，例如：
/* pagination-container 整体布局 */
.pagination-container {
margin-top: 30px;
text-align: center;
}
.pagination-container ul {
list-style: none;
padding: 0;
display: inline-flex; /* 使页码水平排列 */
margin: 0;
}
/* page-item 单个页码或按钮 */
.page-item {
margin: 0 5px; /* 页码间距 */
}
.page-item a {
display: block;
padding: 8px 12px;
border: 1px solid #ddd;
color: #333;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.page-item a:hover {
background-color: #f5f5f5;
color: #007bff;
border-color: #007bff;
}
/* active 当前页高亮 */
.page-item.active a {
background-color: #007bff;
color: white;
border-color: #007bff;
pointer-events: none; /* 禁用当前页的点击事件 */
}
/* 隐藏不必要的文字（如首页/尾页按钮的默认文本在某些设计中可能不显示） */
.page-item:first-child a,
.page-item:last-child a {
font-weight: bold;
}
通过修改这些CSS规则，您可以改变分页按钮的背景色、文字颜色、边框、圆角、大小，甚至添加动画效果等，使其完美匹配您的网站设计风格。
四、进阶技巧与注意事项
- 搜索结果的分页：
archiveList标签的q参数在type="page"模式下同样生效。这意味着，如果您在搜索结果页使用该标签，它会自动识别URL中的搜索关键词q，并