在网站运营中，高效地管理和展示大量内容是提升用户体验的关键。当内容列表过长时，合理的分页机制不仅能让用户更容易浏览，也能优化页面加载速度，间接提升搜索引擎友好度。在AnQiCMS中，实现分页功能并灵活控制页码的显示数量，是一个相对直接且功能强大的过程。

在AnQiCMS中优雅地显示分页链接与灵活控制页码数量

在您的AnQiCMS网站中，当文章、产品或其他列表内容增多时，您会发现将所有内容堆积在一个页面上既不利于用户浏览，也可能影响页面加载速度。此时，分页功能就显得尤为重要。AnQiCMS提供了直观的模板标签，帮助您轻松实现内容的分页显示，并可以根据需要灵活调整页码的展现方式。

准备分页数据：为列表启用分页模式

要使用AnQiCMS的分页功能，首先需要确保您的数据列表标签（如 archiveList 用于文章/产品列表，commentList 用于评论列表，tagDataList 用于标签关联文章列表）配置为分页模式。这通过在标签中添加 type="page" 参数来实现。

例如，如果您想在某个页面展示一个文章列表并希望其支持分页，您可以这样编写 archiveList 标签：

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <p>{{item.Description}}</p>
            </a>
        </li>
    {% empty %}
        <li>当前列表没有任何内容。</li>
    {% endfor %}
{% endarchiveList %}

在这里，type="page" 告诉系统这个列表需要分页处理，而 limit="10" 则指定了每页显示10条内容。系统会将查询结果存储在 archives 变量中供您循环展示。

展示分页链接：使用 pagination 标签

一旦数据列表准备就绪，接下来就可以利用AnQiCMS提供的 pagination 标签来生成并展示分页导航了。这个标签非常智能，它会自动根据当前页面的上下文（如总条数、当前页码等）生成完整的页码导航结构。

pagination 标签的基本使用方式如下：

{% pagination pages with show="5" %}
    {# 在这里放置您的分页链接HTML结构 #}
{% endpagination %}

在 {% pagination %} 标签中，我们定义了一个名为 pages 的变量来接收所有的分页信息。这个 pages 对象包含了构建分页导航所需的一切数据，例如：

  • TotalItems：总共的内容条数。
  • TotalPages：总页数。
  • CurrentPage：当前访问的页码。
  • FirstPage：首页对象，包含链接（Link）和名称（Name），以及是否为当前页（IsCurrent）。
  • LastPage：末页对象，结构与 FirstPage 类似。
  • PrevPage：上一页对象，只有在非首页时才存在。
  • NextPage：下一页对象，只有在非末页时才存在。
  • Pages：一个数组，包含所有中间页码对象，每个对象同样有 Link、Name 和 IsCurrent 属性。

结合 archiveList 标签，一个完整的分页导航代码示例如下：

{# 假设这里是您的内容列表（与上文 archiveList 示例代码相同） #}
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <p>{{item.Description}}</p>
            </a>
        </li>
    {% empty %}
        <li>当前列表没有任何内容。</li>
    {% endfor %}
{% endarchiveList %}

{# 分页导航区域 #}
<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        {# 显示总页数和当前页信息 #}
        <li>总计 {{pages.TotalItems}} 条，共 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</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 %}

        {# 中间页码链接，循环 pages.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 对象中的各种属性，构建了一个包含首页、上一页、中间页码、下一页和末页的完整分页导航。通过 item.IsCurrent 属性，您可以轻松为当前页码添加 active 类，使其在视觉上高亮显示，提升用户体验。

控制页码显示数量：show 参数的妙用

灵活控制分页导航中显示的页码数量，是提升用户体验和页面简洁度的关键。AnQiCMS的 pagination 标签通过 show 参数，让您可以轻松实现这一点。

show 参数的值是一个整数，它指定了在当前页码前后各显示多少个页码。例如：

  • show="3"：如果当前页是第5页，那么除了当前页，它会显示 ... 2 3 4 [5] 6 7 8 ... 这样的页码结构，总计显示当前页前后各3个页码。
  • show="5"：当前页码前后各显示5个页码。
  • show="0"：如果您只想显示“上一页”、“下一页”以及“首页”、“末页”等导航，而不需要显示具体的页码数字，可以将 show 设置为 0。

您可以根据网站的设计风格和用户习惯来调整 show 的值。例如，内容量大、需要快速跳转的网站可以适当增加 show 的值，而内容结构扁平的网站则可以保持较小的 show 值，以保持页面整洁。

只需修改 pagination 标签中的 show 参数即可：

{# 显示当前页码前后各2个页码 #}
{% pagination pages with show="2" %}
    {# ... 您的分页链接HTML结构 ... #}
{% endpagination %}

实际应用与注意事项

  • 确保数据列表启用分页： 再次强调，只有在您的数据列表标签（如 archiveList）中设置了 type="page"，pagination 标签才能正常