在网站内容运营中，文章列表页的分页导航是提升用户体验和优化搜索引擎抓取效率的关键环节。AnQiCMS 作为一个功能丰富的企业级内容管理系统，为我们提供了简洁高效的 pagination 标签，让实现这一功能变得轻而易举。接下来，我们将详细探讨如何在 AnQiCMS 的文章列表页中，利用 pagination 标签实现分页导航功能。

理解分页导航的核心机制

在 AnQiCMS 中实现分页导航，主要依赖于两个核心模板标签的协同工作：archiveList 标签用于从数据库中检索文章列表数据，而 pagination 标签则负责根据 archiveList 生成的分页信息，渲染出用户界面上的分页链接。

要让这两个标签顺利配合，关键在于 archiveList 标签的一个特定参数：type="page"。当 archiveList 设置为 type="page" 时，它不仅会获取指定数量的文章，还会同时计算出总文章数、总页数、当前页码等一系列分页所需的数据，并将这些数据封装成一个 pages 对象。这个 pages 对象，正是 pagination 标签进行分页导航渲染的数据来源。

第一步：准备文章列表数据 (archiveList)

首先，我们需要在文章列表页的模板文件（例如：archive/list.html 或 tag/list.html）中，使用 archiveList 标签来获取文章数据并告知系统需要进行分页。

在您的模板中，您可以使用如下方式调用 archiveList：

{% archiveList archives with type="page" limit="10" %}
    {# 在这里循环显示文章列表内容 #}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            <h2>{{item.Title}}</h2>
            <p>{{item.Description}}</p>
            <small>{{stampToDate(item.CreatedTime, "2006-01-02")}} | 阅读量: {{item.Views}}</small>
        </a>
    </div>
    {% empty %}
    <p>当前分类下还没有文章哦。</p>
    {% endfor %}
{% endarchiveList %}

这里，我们通过 archiveList 标签定义了一个名为 archives 的变量来存储文章数据。其中：

  • type="page"：明确告诉系统，这个列表需要进行分页处理。
  • limit="10"：指定每页显示的文章数量为10篇。您可以根据实际需求调整这个数字。

当 archiveList 以 type="page" 模式运行时，它会自动生成一个全局可用的 pages 变量（如果您未给 archiveList 定义变量名，那么 pagination 标签可以直接使用 pages 变量；如果像示例中定义了 archives，则 pagination 标签会使用 pages 变量，这是 AnQiCMS 内部约定好的）。这个 pages 变量将包含所有分页所需的信息。

第二步：引入分页导航 (pagination)

接下来，在 archiveList 标签块的外部（通常是在文章列表下方），我们就可以使用 pagination 标签来渲染分页导航了。

<nav class="pagination-container">
    {% pagination pages with show="5" %}
    <ul class="pagination-list">
        {# 显示总条数、总页数、当前页码等信息 #}
        <li class="info">共 {{pages.TotalItems}} 篇文章，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>

        {# 首页链接 #}
        {% if pages.FirstPage %}
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            </li>
        {% endif %}

        {# 上一页链接 #}
        {% 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 %}

        {# 尾页链接 #}
        {% if pages.LastPage %}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
            </li>
        {% endif %}
    </ul>
    {% endpagination %}
</nav>

在这个 pagination 标签块中：

  • pages：这是 archiveList 标签在 type="page" 模式下自动生成的包含分页信息的对象。
  • show="5"：这个参数决定了在分页导航中最多同时显示5个页码按钮（例如：1, 2, 3, 4, 5 或 …, 3, 4, 5, 6, …）。您可以根据界面设计调整这个值。
  • pages.TotalItems, pages.TotalPages, pages.CurrentPage：直接获取总条目数、总页数和当前页码。
  • pages.FirstPage, pages.LastPage, pages.PrevPage, pages.NextPage：这些是包含首页、尾页、上一页和下一页链接的对象。它们内部有 Link (链接地址) 和 Name (显示名称，如”首页”、”上一页”) 属性，以及 IsCurrent 属性来判断是否为当前页。
  • pages.Pages：这是一个数组，包含了中间的页码链接。我们通过 {% for item in pages.Pages %} 循环遍历它，item.Link 提供页码链接，item.Name 提供页码数字，item.IsCurrent 用于标记当前页。

完整代码示例

将上述两个部分结合起来，一个完整的带有分页导航的文章列表页模板大致如下：

”`twig {# 假设这是一个名为 list.html 的模板文件 #} <!DOCTYPE html> 

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="description" content="{% tdk with name="Description" %}">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">


<header>
    <h1>{% tdk with name="Title" %}</h1>
</header>

<main class="container">
    <section class="article-list">
        {% archiveList archives with type="page" limit="10" %}
            {% for item in archives %}
            <article class="article-item">
                <a href="{{item.Link}}">
                    <h3>{{item.Title}}</h3>
                    <p>{{item.Description}}</p>
                    <div class="meta">
                        <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span>浏览量: {{item.Views}}</span>
                    </div>
                </a>
            </article>
            {% empty %}
            <p>当前分类下还没有文章哦。</p>
            {% endfor %}
        {% endarchiveList %}
    </section>

    {# 分页导航区域 #}
    <nav class="pagination-container">
        {% pagination pages with show="5" %}
        <ul class="pagination-list">
            <li class="info">共 {{pages.TotalItems}} 篇文章，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>

            {% if pages.FirstPage %}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
                </li>
            {% endif %}

            {% if pages.PrevPage %}
                <li class="page-item">
                    <a href="{{pages.PrevPage