如何在AnqiCMS模板中实现分页导航，并自定义显示页码数量和样式？

在内容管理系统中，尤其是当网站承载了大量文章、产品或其他列表信息时，合理的分页导航是提升用户体验、方便内容浏览的关键。它不仅能帮助访问者快速找到所需信息，还能避免单页内容过长导致加载缓慢，对搜索引擎优化（SEO）也大有裨益。AnqiCMS 提供了一套强大且灵活的模板标签，让您能够轻松地在网站中实现分页功能，并按需自定义其显示方式和样式。

开启分页功能：从列表标签开始

在 AnqiCMS 中，要为您的内容列表启用分页功能，首先需要在获取内容列表的标签中指定分页类型。例如，您在使用 archiveList（文档列表）、tagDataList（Tag文档列表）或 commentList（评论列表）等标签时，需要将 type 参数设置为 "page"。这意味着您告诉系统，这个列表需要按页显示数据，而不是一次性列出所有内容。同时，limit 参数则用于定义每页显示多少条内容，这将直接影响到总页码的计算。

例如，如果您想在一个文章列表中每页显示 10 篇文章并启用分页，您的 archiveList 标签可能会这样设置：

{% archiveList archives with type="page" limit="10" %}
    {# 循环显示文章列表内容 #}
    {% for item in archives %}
        <a href="{{item.Link}}">{{item.Title}}</a>
        {# ... 其他文章信息 ... #}
    {% endfor %}
{% endarchiveList %}

一旦 type="page" 被设置，AnqiCMS 就会在当前页面的上下文中自动提供一个 pages 对象，这个对象包含了所有关于分页所需的数据，我们后续的分页导航就将围绕它展开。

理解分页数据：pages 变量的奥秘

当您的列表标签启用了分页功能后，您就可以通过 pagination 标签来渲染分页导航。这个标签会处理前面列表标签生成的分页数据，并将其封装在一个 pages 变量中，供您在模板中使用。

这个 pages 变量并非简单的页码列表，它是一个包含丰富信息的对象，能让您构建出功能完善的分页导航。其中包含了几个核心属性，掌握它们能让您随心所欲地控制分页显示：

• TotalItems：表示所有内容的总条目数，让您可以知道网站上共有多少篇文章或产品。
• TotalPages：显示内容的总页码数，方便用户了解内容的整体规模。
• CurrentPage：指示当前用户正在浏览的是第几页，这是判断激活状态的关键。
• FirstPage：一个包含了首页链接 (Link) 和名称 (Name) 的对象，通常用于“首页”按钮。
• LastPage：与 FirstPage 类似，包含了末页的链接和名称。
• PrevPage：包含了上一页的链接和名称，当当前页不是第一页时可用。
• NextPage：包含了下一页的链接和名称，当当前页不是最后一页时可用。
• Pages：这是一个数组对象，包含了中间部分的页码信息。它通常用于 for 循环，逐个显示可点击的页码。每个页码项（item）自身也包含 Name (页码数字), Link (页码链接), IsCurrent (是否为当前页) 等属性。

有了这些信息，您就可以在模板中灵活地组织分页导航的各个部分了。

自定义显示页码数量与样式

AnqiCMS 的分页标签 pagination 最常用的一个参数就是 show，它允许您自定义在中间区域显示多少个页码。例如，show="5" 会让分页导航在当前页附近只显示 5 个页码链接，超出部分则会用省略号或直接隐藏。这对于页码数量非常多的列表尤其有用，能够避免分页条过长导致页面混乱。

在构建分页导航时，我们通常会使用 <ul><li><a> 这样的 HTML 结构，并通过 CSS 来美化它们。以下是一个常见的分页导航模板代码示例，它结合了 show 参数、pages 变量的各项属性，并利用 IsCurrent 属性来为当前页添加特殊样式，让用户一目了然：

<div class="pagination-container">
    {% pagination pages with show="5" %}
    <ul class="pagination-list">
        {# 显示总条目数和页码信息，帮助用户了解概况 #}
        <li class="pagination-info">共 {{pages.TotalItems}} 条内容，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>

        {# “首页”按钮，当当前页是首页时，可以给它添加不同的样式 #}
        <li class="pagination-item {% if pages.FirstPage.IsCurrent %}is-active{% endif %}">
            <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        </li>

        {# “上一页”按钮，只有当存在上一页时才显示 #}
        {% if pages.PrevPage %}
        <li class="pagination-item">
            <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        </li>
        {% endif %}

        {# 循环显示中间部分的页码，这里会根据 show 参数来限制数量 #}
        {% for item in pages.Pages %}
        <li class="pagination-item {% if item.IsCurrent %}is-active{% endif %}">
            <a href="{{item.Link}}">{{item.Name}}</a>
        </li>
        {% endfor %}

        {# “下一页”按钮，只有当存在下一页时才显示 #}
        {% if pages.NextPage %}
        <li class="pagination-item">
            <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        </li>
        {% endif %}

        {# “末页”按钮，当当前页是末页时，可以给它添加不同的样式 #}
        <li class="pagination-item {% if pages.LastPage.IsCurrent %}is-active{% endif %}">
            <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    {% endpagination %}
</div>

通过这段代码，您可以创建一个具有“首页”、“上一页”、“下一页”、“末页”以及中间页码（可根据 show 值动态调整数量）的分页导航。is-active 类名可以用来突出显示当前页码，例如通过 CSS 设置背景色或字体加粗，从而提供更直观的视觉反馈。

对于页码的显示样式，您可以通过自定义 CSS 文件来控制 pagination-container、pagination-list、pagination-item 和 is-active 等类名的外观。例如：

.pagination-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    justify-content: center;
}
.pagination-item {
    margin: 0 5px;
}
.pagination-item a {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
}
.pagination-item a:hover {
    background-color: #f0f0f0;
}
.pagination-item.is-active a {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.pagination-info {
    padding: 8px 12px;
    color: #666;
}

这段 CSS 只是一个基础示例，您可以根据网站的整体风格进行调整，打造出独具特色的分页导航。

总结

在 AnqiCMS 中实现分页导航，本质上是结合了内容列表标签的 type="page" 属性，以及 pagination 标签对 pages 对象的灵活运用。通过理解 pages 对象提供的各种数据，并善用 show 参数进行页码数量控制，再配合自定义的 HTML 结构和 CSS 样式，您可以为网站提供一个既美观又实用的分页导航系统，大幅提升用户的浏览体验。

常见问题 (FAQ)

1. 我的分页导航没有显示出来，或者点击后链接不对，是哪里出了问题？

首先，请确保您在获取内容列表的标签（如 archiveList、tagDataList 等）中正确设置了 type="page" 参数。如果缺少这个参数，系统就不会生成分页数据。其次，检查您是否在 pagination 标签之前放置了列表标签，并且 pagination 标签使用的变量名（例如 pages）与列表标签自动生成的变量是匹配的。最后，检查您的网站伪静态规则是否配置正确，错误的伪静态规则可能导致分页链接无法正常解析。

2. 如何才能让当前页码在视觉上更突出，方便用户识别？

在上面的示例中，我们利用了 pages.Pages 数组中每个页码项自带的 IsCurrent 属性。当一个页码是当前页时，IsCurrent 的值为 true。您可以在对应的 <li> 或 <a> 标签上通过条件判断（例如 {% if item.IsCurrent %}is-active{% endif %}）来动态添加一个 CSS 类，然后为这个 CSS 类编写样式规则（如设置背景色、字体颜色、边框等），使其在众多页码中脱颖而出。

3. 如果我的网站页码特别多（比如上百页），我希望能更好地控制中间页码的显示数量，应该怎么做？

您可以使用 pagination 标签的 show 参数来精确控制中间页码的数量。例如，如果您希望在当前页码前后各显示 2 个页码（总共 5 个页码，如果包含当前页），您可以将参数设置为 show="5"。系统会智能地显示当前页附近的页码，并在必要时自动插入省略号（如果您在模板中自己实现类似逻辑的话，或者系统默认提供的话）。这样可以避免在页码过多时，分页条占据过多页面空间。