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 %}</