AnQiCMS的`pagination`标签如何灵活控制分页页码的显示数量和样式？
在管理内容丰富的网站时，高效的页面导航系统是提升用户体验和搜索引擎优化（SEO）的关键。安企CMS深知这一点，其内置的pagination标签为我们提供了细致入微的控制，让网站的页码显示既灵活又美观。这篇文章将带你深入了解如何运用pagination标签，灵活掌控分页页码的显示数量和样式。
了解 pagination 标签的核心作用
在安企CMS中，pagination标签并非独立存在，它通常与内容列表标签（如archiveList、tagDataList、commentList等）配合使用。当这些列表标签的type参数设置为"page"时，它们会返回一个可供分页的数据集，而pagination标签的任务就是根据这个数据集，生成相应的页码导航。
简单来说，pagination标签的作用是将后端计算好的分页逻辑，以可定制的HTML结构呈现在前端页面上，让我们能够轻松实现“上一页”、“下一页”、“首页”、“尾页”以及一系列页码的导航。
如何使用 pagination 标签
pagination标签的基本使用方式非常直观，它需要包裹在{% pagination ... %}和{% endpagination %}之间。在使用时，你需要将通过列表标签获取到的分页数据传递给它，通常我们会将这个变量命名为pages。
例如，在一个文档列表页面，我们可能会这样组合使用archiveList和pagination：
{# 首先，通过 archiveList 获取分页数据 #}
{% archiveList archives with type="page" limit="10" %}
{# 循环显示文档列表内容 #}
{% for item in archives %}
<li><a href="{{item.Link}}">{{item.Title}}</a></li>
{% empty %}
<li>暂无文档</li>
{% endfor %}
{% endarchiveList %}
{# 接下来，使用 pagination 标签生成页码导航 #}
<div class="pagination-area">
{% pagination pages with show="5" %}
{# 这里是分页页码的具体显示内容，稍后详细说明 #}
{% endpagination %}
</div>
在这里，pages这个变量包含了所有与分页相关的信息，比如总条数、总页数、当前页码、首页链接、上一页链接、下一页链接、尾页链接，以及最重要的——中间页码数组。
灵活控制页码显示数量：show 参数
pagination标签的一大亮点在于它允许我们通过show参数，灵活地控制中间页码区域的显示数量。这对于保持页码导航的简洁性和美观性非常重要。
show参数接受一个整数值，它决定了在当前页码周围显示多少个页码链接。例如：
show="3"：这会使得页码导航更加紧凑，通常在当前页码前后各显示1-2个页码，省略号会更早出现。show="5"：这是一个比较常用的设置，它在当前页码前后各显示2-3个页码，提供了较好的上下文，又不会显得过于冗长。show="7"：如果你的页面空间充裕，或者希望用户能看到更多的页码选项，可以适当增加这个值。
合理地设置show参数，能够让分页在不同页面数量和设备尺寸下，都能保持良好的视觉平衡。例如，当总页数不多时，show参数会自动调整，显示所有页码而不会出现省略号。当总页数很多时，它又能智能地隐藏部分页码，避免页码条过长。
自定义分页样式与布局
pagination标签本身不直接输出带样式的HTML，它提供的是构建分页所需的数据。这意味着我们可以完全掌握分页的HTML结构和CSS样式，实现高度自定义的外观。
pages变量中提供了多个属性，供我们构建样式：
pages.TotalItems：总内容条数。pages.TotalPages：总页数。pages.CurrentPage：当前页码。pages.FirstPage、pages.LastPage、pages.PrevPage、pages.NextPage：这些是四个特殊的对象，每个都包含Name（如“首页”）和Link（链接地址），以及IsCurrent（是否当前页，通常首页和尾页不会是当前页）。pages.Pages：这是一个数组，包含了中间部分的页码对象。每个对象同样有Name（页码数字）、Link（链接地址）和IsCurrent（是否当前页）。
利用这些属性，我们可以轻松地构造出各种风格的分页样式：
<div class="pagination-wrapper">
<ul class="pagination-list">
{# 显示总页数和当前页信息，可选 #}
<li class="page-info">
总{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页
</li>
{# 首页链接 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}is-current{% 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 %}is-current{% 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 %}is-current{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
</div>
在上面的代码中，我们为每个页码项添加了page-item类，并利用{% if item.IsCurrent %}或{% if pages.FirstPage.IsCurrent %}判断当前是否为活动页，为其添加is-current类。这样，我们就可以通过自定义CSS来控制is-current类的样式，实现当前页码的高亮显示，例如：
.pagination-list {
display: flex;
list-style: none;
padding: 0;
justify-content: center;
align-items: center;
}
.page-item {
margin: 0 5px;
}
.page-item a {
display: block;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
text-decoration: none;
color: #333;
transition: background-color 0.3s ease;
}
.page-item a:hover {
background-color: #f5f5f5;
}
.page-item.is-current a {
background-color: #007bff;
color: #fff;
border-color: #007bff;
pointer-events: none; /* 当前页不可点击 */
}
.page-info {
margin-right: 15px;
color: #666;
}
通过这种方式，页码的布局、颜色、字体、边框等所有视觉元素都可以根据网站的整体设计风格进行调整，而无需受限于CMS提供的固定样式。
完整示例：在文档列表页应用分页
让我们看一个更完整的例子，如何在文章列表页实现分页功能：
”`twig {# 假设这是文章列表页模板 (e.g., archive/list.html) #} <!DOCTYPE html>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</