安企CMS（AnQiCMS）作为一个功能强大的内容管理系统，在构建网站时提供了灵活多样的内容展示方式。其中，分页功能对于内容量较大的列表页至关重要，它不仅提升了用户体验，也优化了网站性能。熟练运用 pagination 标签，能够帮助我们精确控制分页的显示逻辑，从而打造更加友好和专业的网站。

本文将深入探讨 pagination 标签的用法，重点讲解如何从中获取当前页码、总页数以及构建首页和末页的导航链接。

了解 pagination 标签的基本结构

在安企CMS中，pagination 标签通常与列表类标签（如 archiveList、tagDataList 或 commentList 等）配合使用，且这些列表标签必须设置 type="page" 模式，以启用分页功能。

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

{% pagination pages with show="5" %}
    {# 在这里放置你的分页逻辑 #}
{% endpagination %}

在这里，pages 是我们为分页数据定义的变量名，你可以根据自己的习惯为它命名。with show="5" 则是一个可选参数，用于指定分页导航中最多显示多少个页码链接。例如，show="5" 意味着最多会显示当前页周围的5个页码。

获取核心分页信息：当前页码、总页数和总条数

pagination 标签会对外暴露一个包含丰富分页信息的 pages 对象。通过这个对象，我们可以轻松获取到页面的关键数据：

  • 当前页码 (CurrentPage) {{pages.CurrentPage}} 可以直接输出用户当前所处的页码。这对于在页面上显示“第 X 页”这样的信息非常有用。
  • 总页数 (TotalPages) {{pages.TotalPages}} 则返回所有内容共分为多少页。这让用户对内容的整体规模有一个直观的了解。
  • 总条数 (TotalItems) 虽然不直接包含在标题问题中，但 {{pages.TotalItems}} 也是一个非常有用的属性，它表示列表中所有内容的条目总数。在很多场景下，我们可能需要在分页旁边显示“共 X 条记录”之类的提示。

这些信息通常用于向用户展示分页状态，例如：共 {{pages.TotalItems}} 条记录，分为 {{pages.TotalPages}} 页，当前是第 {{pages.CurrentPage}} 页。

构建灵活的导航链接：首页、末页、上一页、下一页及中间页码

除了基础的页码信息，pages 对象还提供了构建完整分页导航所需的所有链接和状态：

  • 首页链接 (FirstPage) pages.FirstPage 是一个对象，包含 Link（首页的URL）和 Name（通常是“首页”或“Home”）。我们还可以通过 pages.FirstPage.IsCurrent 来判断当前是否正处于首页，从而为其添加高亮样式。

  • 末页链接 (LastPage) 与首页类似，pages.LastPage 也是一个对象，包含 Link（末页的URL）和 Name（通常是“末页”或“Last”）。pages.LastPage.IsCurrent 用于判断当前是否是末页。

  • 上一页/下一页链接 (PrevPage / NextPage) pages.PrevPage 和 pages.NextPage 分别代表上一页和下一页的导航对象。它们同样包含 Link 和 Name 属性。需要注意的是，当处于第一页时 PrevPage 将不存在，而处于最后一页时 NextPage 将不存在。因此，在模板中引用它们时，需要进行条件判断，例如 {% if pages.PrevPage %}。

  • 中间页码链接 (Pages) pages.Pages 是一个数组，包含了分页导航中显示的所有中间页码（即除了首页、末页、上一页、下一页之外的具体页码）。我们可以通过 for 循环遍历这个数组：

    {% for item in pages.Pages %}
    <a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}

    每个 item 同样包含 Name（页码数字，如“1”、“2”）、Link（对应页码的URL）和 IsCurrent（是否为当前页）。

完整的分页导航示例代码

结合上述所有知识点，一个完整且功能丰富的分页导航代码示例如下：

<div class="pagination">
    {# 使用 archiveList 标签获取分页数据，确保 type="page" #}
    {% archiveList archives with type="page" limit="10" %}
        {# 这里是你的列表内容，例如文章标题、摘要等 #}
        {% for item in archives %}
            <div class="article-item">
                <a href="{{ item.Link }}">
                    <h3>{{ item.Title }}</h3>
                    <p>{{ item.Description|truncatechars:100 }}</p>
                </a>
                <span class="info">发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
            </div>
        {% empty %}
            <p>暂无内容。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页导航区域 #}
    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            <p class="pagination-summary">
                共 <span>{{pages.TotalItems}}</span> 条，总 <span>{{pages.TotalPages}}</span> 页，当前第 <span>{{pages.CurrentPage}}</span> 页
            </p>
            <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 %}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>
</div>

<style>
/* 简单的分页样式，实际项目中请根据需要调整 */
.pagination-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.pagination-nav li {
    margin: 0 5px;
}
.pagination-nav a {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
}
.pagination-nav .active a,
.pagination-nav a:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.pagination-summary {
    text-align: center;
    margin-bottom: 15px;
    color: #666;
}
.pagination-summary span {
    font-weight: bold;
    color: #333;
}
</style>

这段代码展示了如何使用 pagination 标签，并通过其提供的 pages 对象，灵活地构建出包含当前页码、总页数、总条数、首页、末页、上一页、下一页以及中间页码的完整分页导航。通过 IsCurrent 属性，我们可以轻松地为当前页添加高亮样式，进一步提升用户体验。

总结

`