如何为安企CMS模板中的文档列表创建可定制的页码分页组件？

在构建一个内容丰富的网站时，高效地展示和管理文档列表至关重要。尤其对于拥有大量内容的站点，一个设计合理、功能完善的页码分页组件不仅能大幅提升用户体验，还能优化网站的SEO表现，帮助搜索引擎更好地抓取和索引内容。安企CMS（AnQiCMS）凭借其灵活的模板引擎和强大的标签功能，让我们能够轻松为文档列表创建高度可定制的页码分页组件。

安企CMS的模板系统采用类似Django模板引擎的语法，通过{% 标签 %}来处理逻辑，{{ 变量 }}来输出内容。在实现分页功能时，我们主要会用到两个核心标签：archiveList（文档列表标签）和pagination（分页标签）。这两个标签协同工作，前者负责从数据库中按页获取文档数据，后者则基于这些数据生成可操作的页码导航。

第一步：准备分页数据源 - 使用 archiveList 标签

要创建一个可分页的文档列表，首先需要告诉安企CMS，我们希望以分页的形式获取数据。这通过archiveList标签的type="page"参数来实现。当type设置为page时，archiveList不再是简单地列出所有符合条件的文档，而是会根据当前页码和设定的每页显示数量来检索数据，并同时为pagination标签准备必要的分页信息。

例如，如果我们想获取某个分类下的文章列表，并希望每页显示10篇文章，模板代码可能看起来像这样：

{% archiveList archives with type="page" categoryId="1" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        <p>{{ item.Description }}</p>
        <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
    </li>
    {% empty %}
    <li>暂无内容</li>
    {% endfor %}
{% endarchiveList %}

在这段代码中，archives变量包含了当前页的文档数据，我们可以像处理普通列表一样遍历它。categoryId="1"指定了分类ID，limit="10"则设置了每页显示10篇文章。

第二步：构建分页导航组件 - 深入 pagination 标签

在archiveList标签生成了分页数据后，紧接着就可以使用pagination标签来构建实际的页码导航了。pagination标签会自动获取由archiveList（或其他分页数据源标签）提供的分页上下文信息，并允许我们精细控制页码的显示方式。

pagination标签的使用方式通常是将其包裹在一个容器元素内，并且它会向其内部提供一个名为pages的对象，这个pages对象包含了所有与分页相关的详细信息，例如：

• TotalItems：总文档数量
• TotalPages：总页码数量
• CurrentPage：当前页码
• FirstPage：首页对象（包含Name和Link）
• LastPage：末页对象（包含Name和Link）
• PrevPage：上一页对象（包含Name和Link）
• NextPage：下一页对象（包含Name和Link）
• Pages：一个包含中间页码对象的数组，每个对象都有Name（页码数字）、Link（链接地址）和IsCurrent（是否当前页）属性。

pagination标签还支持一个非常实用的参数：show。show参数用于控制在页码导航中同时显示多少个页码链接，例如show="5"表示最多显示5个连续的页码。

现在，我们来看一个完整的、可定制的页码分页组件示例：

<div class="pagination-container">
    {% archiveList archives with type="page" categoryId="1" limit="10" %}
        <ul class="document-list">
        {% for item in archives %}
            <li>
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p>{{ item.Description }}</p>
                <div class="meta">
                    <span>发布于：{{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
                    <span>阅读量：{{ item.Views }}</span>
                </div>
            </li>
        {% empty %}
            <li class="no-content">当前分类暂无文档。</li>
        {% endfor %}
        </ul>

        {% pagination pages with show="7" %}
            <nav class="page-numbers">
                <ul>
                    {# 显示首页链接 #}
                    <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 %}current{% 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>
                <div class="page-info">
                    <span>总计 {{ pages.TotalItems }} 篇文档，共 {{ pages.TotalPages }} 页</span>
                    <span>当前第 {{ pages.CurrentPage }} 页</span>
                </div>
            </nav>
        {% endpagination %}
</div>

代码解析：

• archiveList 标签: 外层首先使用archiveList获取需要分页的文档。type="page"是关键，它激活了分页模式。
• pagination pages with show="7": 紧随其后，pagination标签被调用，并将分页数据赋值给pages变量。show="7"意味着除了首页、尾页、上一页、下一页之外，最多显示7个连续的页码数字。
• 首页、末页、上一页、下一页: 通过pages.FirstPage、pages.LastPage、pages.PrevPage和pages.NextPage对象，我们可以轻松地构建这些导航链接。{% if %}判断确保只有当这些页面存在时（例如，不是第一页时才显示上一页），链接才会被渲染出来。
• 中间页码: {% for item in pages.Pages %}