在构建网站时，当内容量日益增长，文档列表页会变得冗长，这不仅影响页面加载速度，更让访问者难以高效地找到所需信息。此时，为文档列表添加分页功能，成为提升用户体验的关键一环。安企CMS（AnQiCMS）提供了强大的 pagination 标签，配合文档列表标签 archiveList，可以轻松实现这一目标，让您的网站内容展示更专业、更易用。

优化用户体验：AnQiCMS pagination 标签实现文档列表分页显示详解

网站内容的有效组织与展示，是提升用户体验的核心要素之一。面对海量的文档、文章或产品信息，如果将它们一股脑地堆砌在一个页面上，不仅会造成页面加载缓慢，更会大大增加用户查找信息的难度，从而影响其浏览意愿。安企CMS提供了一套直观而高效的分页机制，通过灵活运用 pagination 标签，您可以为各类文档列表页添加专业的分页导航，显著改善用户体验。

分页实现的核心：archiveList 与 pagination 的配合

在安企CMS中实现文档列表分页，通常需要两个核心步骤：首先是使用 archiveList 标签来获取需要分页显示的数据，并告知系统这些数据需要进行分页处理；其次，再使用 pagination 标签来渲染实际的分页导航链接。

第一步：准备可分页的文档数据

在使用 pagination 标签之前，您需要先用 archiveList 标签来获取文档列表。关键在于，您必须在 archiveList 中指定 type="page"，这将告诉系统为这些文档生成分页所需的数据结构。同时，通过 limit 参数来控制每页显示多少条文档，例如 limit="10" 意味着每页显示10条记录。

{# 假设我们想获取文章模型下的所有文档，每页显示10条 #}
{% archiveList archives with type="page" moduleId="1" limit="10" %}
    {# 在这里循环显示当前页的文档内容 #}
    {% for item in archives %}
        <div class="document-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description|truncatechars:150}}</p>
            <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量: {{item.Views}}</span>
        </div>
    {% empty %}
        <p>抱歉，暂时没有更多文档。</p>
    {% endfor %}
{% endarchiveList %}

archiveList 标签在 type="page" 模式下，会生成一个名为 pages 的分页对象（如果未手动指定其他变量名，则默认为 pages），这个对象包含了所有与分页相关的数据，供 pagination 标签使用。

第二步：渲染分页导航

有了 archiveList 准备好的 pages 对象，就可以使用 pagination 标签来渲染分页导航了。这个标签会根据 pages 对象中的数据，自动生成“首页”、“上一页”、“下一页”、“尾页”以及中间的页码链接。

pagination 标签最常用的参数是 show，它用于控制中间页码区域最多显示多少个页码链接。例如，show="5" 会让分页导航最多显示5个连续的页码。

<div class="pagination-controls">
    {% pagination pages with show="5" %}
        <ul class="pagination-list">
            {# 首先，您可以选择显示一些总体信息，例如总条数、总页数和当前页码 #}
            <li class="pagination-info">总数：{{pages.TotalItems}}条，共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>

            {# 首页链接，通过 IsCurrent 判断是否为当前页，以便添加样式 #}
            <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 循环来遍历 Pages 数组实现的 #}
            {% 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>

结合上述两个代码片段，一个功能完善且用户友好的分页文档列表就呈现在您面前了。

pages 对象中包含的丰富信息

pagination 标签内部的 pages 对象，是一个功能强大的数据结构，它包含了构建完整分页导航所需的几乎所有信息：

  • TotalItems：文档列表的总条目数。
  • TotalPages：文档列表的总页数。
  • CurrentPage：当前访问的页码。
  • FirstPage：一个包含“首页”链接 (Link)、名称 (Name) 和是否为当前页 (IsCurrent) 的对象。
  • LastPage：一个包含“尾页”链接 (Link)、名称 (Name) 和是否为当前页 (IsCurrent) 的对象。
  • PrevPage：一个包含“上一页”链接 (Link)、名称 (Name) 的对象。如果当前是第一页，则此对象为空。
  • NextPage：一个包含“下一页”链接 (Link)、名称 (Name) 的对象。如果当前是最后一页，则此对象为空。
  • Pages：一个包含中间页码列表的数组。数组中的每个元素也是一个对象，包含页码的链接 (Link)、名称 (Name，即页码数字) 和是否为当前页 (IsCurrent)。

利用这些信息，您可以根据设计需求，灵活定制分页导航的样式和显示逻辑，例如，为当前页添加高亮样式，或者在没有上一页/下一页时隐藏相应的按钮。

提升用户体验的价值

通过 pagination 标签实现的分页功能，能为您的网站带来显著的用户体验提升：

  1. 更快的页面加载速度： 分页将大量内容分散到多个页面，每个页面只加载一部分数据，从而大大减少了单页面的加载时间，提升了网站响应速度。
  2. 清晰的导航指引： 分页导航清晰地展示了用户在整个内容列表中的位置，以及前往其他页面的路径，降低了用户的认知负担。
  3. 优化的内容组织： 分页使得内容逻辑上更连贯，用户可以逐页浏览，更容易理解和吸收信息。
  4. 改善搜索引擎友好性： 合理的分页结构有助于搜索引擎更好地抓取和索引网站内容，避免重复内容或页面过大导致的抓取效率低下。

总之，安企CMS的 pagination 标签是内容运营中不可或缺的工具。它以简洁的语法，提供了