在网站内容管理中，为列表页面配置一个功能完善的分页导航，是提升用户体验和优化网站结构的关键一环。安企CMS（AnqiCMS）提供了简洁而强大的 pagination 标签，让开发者能够轻松实现这一需求。

要让 pagination 标签在列表页正确生成分页导航，首先要理解它的工作机制以及与内容列表标签（如 archiveList）之间的协同关系。pagination 标签并非独立存在，它需要从内容列表标签中获取分页数据。这意味着，在您的模板文件中，必须先使用 archiveList 这样的内容列表标签来查询数据，并明确指定其类型为分页模式，然后 pagination 标签才能基于这些数据构建分页导航。

配置内容列表标签以支持分页

在任何需要显示分页导航的列表页面，例如文章列表页、产品列表页或分类列表页，您都需要使用 archiveList 标签来获取文章或产品数据。关键在于，您需要将 type 参数设置为 "page"，并且通过 limit 参数定义每页显示的项目数量。

例如，如果您想在一个页面上显示每页10篇文章，可以这样配置 archiveList 标签：

{% archiveList archives with type="page" limit="10" %}
    {# 循环输出每篇文章的简要信息 #}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
        </a>
    </li>
    {% endfor %}
{% endarchiveList %}

在这里，archives 是一个变量名，它会包含当前页的文章数据。type="page" 告诉安企CMS这是一个需要分页的列表，而 limit="10" 则设定了每页的项目数量。

深入理解 pagination 标签的配置

在 archiveList 标签之后，您就可以引入 pagination 标签来生成分页导航了。pagination 标签的使用方法如下：

{% pagination pages with show="5" %}
    {# 在这里构建您的分页导航 HTML 结构 #}
{% endpagination %}

这里，pages 是一个包含了所有分页信息的变量，它是由 archiveList type="page" 自动生成的。show="5" 参数则指定了分页导航中最多显示多少个页码按钮。例如，如果总共有10页，show="5" 可能会显示当前页码以及前后共5个页码，而不是全部10个。

pages 变量内部包含了丰富的分页状态和链接信息，您可以通过它来构建功能完善的分页导航：

  • pages.TotalItems：总项目数。
  • pages.TotalPages：总页数。
  • pages.CurrentPage：当前页码。
  • pages.FirstPage：首页对象，包含 Name (例如”首页”) 和 Link。
  • pages.LastPage：末页对象，包含 Name (例如”尾页”) 和 Link。
  • pages.PrevPage：上一页对象，包含 Name (例如”上一页”) 和 Link。如果当前是第一页，则此对象为空。
  • pages.NextPage：下一页对象，包含 Name (例如”下一页”) 和 Link。如果当前是最后一页，则此对象为空。
  • pages.Pages：一个数组，包含了中间页码的详细信息，每个元素都包含 Name (页码数字)、Link 和 IsCurrent (是否当前页)。

利用这些信息，您可以灵活地设计分页导航的布局。一个常见的功能完善的分页导航会包含“首页”、“上一页”、“中间页码”、“下一页”和“尾页”这些元素。

以下是一个推荐的，功能完善且易于理解的分页导航实现示例：

<div class="pagination-nav">
    {% pagination pages with show="5" %}
    <ul>
        {# 显示总数信息，方便用户了解列表规模 #}
        <li>共 <b>{{pages.TotalItems}}</b> 条记录，<b>{{pages.TotalPages}}</b> 页，当前第 <b>{{pages.CurrentPage}}</b> 页</li>

        {# 首页链接，并根据是否当前页添加样式 #}
        <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>
    {% endpagination %}
</div>

通过这个结构，您可以利用 CSS 轻松地为分页导航添加样式，例如将当前页码高亮显示，或者隐藏不可点击的“上一页”/“下一页”按钮。

结合搜索与筛选功能

值得一提的是，安企CMS的 pagination 标签与搜索和筛选功能也能无缝集成。当您的 archiveList 标签所在页面包含 q 参数（搜索关键词）或自定义筛选参数时，pagination 标签生成的链接会自动包含这些参数，从而确保用户在翻页时，搜索和筛选条件依然有效。这大大简化了开发复杂列表页面的工作量，无需手动处理URL参数。

总之，正确配置 pagination 标签，是构建高效、用户友好的安企CMS网站列表页面的基础。通过理解 archiveList 与 pagination 之间的关系，并利用 pages 变量提供的丰富信息，您可以轻松地实现功能强大的分页导航。

常见问题 (FAQ)

1. 为什么我配置了 pagination 标签，但页面上没有显示分页导航？

最常见的原因是您用于获取内容列表的标签（例如 archiveList 或 tagDataList）没有正确设置 type="page" 参数，或者没有设置 limit 参数。pagination 标签需要这些信息才能知道如何进行分页以及每页显示多少项。请确保您的内容列表标签类似于 {% archiveList archives with type="page" limit="10" %}。

2. 如何自定义分页导航的样式和布局？

pagination 标签只提供分页所需的动态数据和链接，具体的 HTML 结构和 CSS 样式完全由您控制。您可以在 {% pagination pages with show="5" %}...{% endpagination %} 之间的代码块中，使用 HTML 标签（如 ul, li, a）结合 CSS 类名来设计您想要的外观。例如，您可以使用 class="active" 来标记当前页码，然后通过 CSS 规则来高亮它。

3. 我的列表页有搜索和筛选功能，分页时这些条件会不会丢失？

不会。安企CMS 的 pagination 标签设计得非常智能，它会自动继承当前页面 URL 中的搜索关键词（q 参数）和任何自定义筛选参数。这意味着，当用户在搜索或筛选结果页翻页时，生成的分页链接会自动保留这些查询参数，确保用户体验的连贯性。您无需进行额外的配置来处理这种情况。