当前位置：首页 > news >正文

PbootCMS制作个性分页条之单页/总页数效果（PbootCMS 分页条实现与美化指南）

news 2026/3/27 1:43:30

如何在 PbootCMS 中实现简洁明了的分页条效果，并通过 CSS 美化分页样式，适用于博客站、资讯站等场景。

一、分页条功能概述

PbootCMS 提供了丰富的分页标签，可以轻松实现分页功能。以下是一个常见的分页条效果，包含首页、上一页、下一页、尾页、当前页及总页数信息。

二、实现步骤

第一步：HTML 分页代码

以下是实现分页条的核心代码：

<!-- 分页 -->
{pboot:if({page:rows}>0)}<div class="pagebar"><div class="pagination"><!-- 首页 --><a class="page-item page-link hidden-sm" href="{page:index}" title="首页">首页</a><!-- 上一页 --><a class="page-item page-link" href="{page:pre}" title="上一页">上一页</a><!-- 当前页 --><a class="page-item page-num-current" href="javascript:;" title="当前页">{page:current}</a><!-- 当前页/总页数 --><a class="page-item page-link" href="javascript:;" title="当前页/总页数">{page:current}/{page:count}</a><!-- 下一页 --><a class="page-item page-link" href="{page:next}" title="下一页">下一页</a><!-- 尾页 --><a class="page-item page-link hidden-sm" href="{page:last}" title="尾页">尾页</a></div></div>
{else}<!-- 无数据提示 --><div class="tac text-secondary">本分类下无任何数据！</div>
{/pboot:if}

标签说明：

{page:index}：首页链接。
{page:pre}：上一页链接。
{page:next}：下一页链接。
{page:last}：尾页链接。
{page:current}：当前页码。
{page:count}：总页数。
{page:rows}：总记录数（用于判断是否有数据）。

第二步：CSS 样式美化

以下是分页条的 CSS 样式代码，用于美化分页效果：

/* ----- 通用PB分页条 ----- */
.pagebar .pagination {display: flex;justify-content: center; /* 居中对齐 */margin-top: 10px;
}.pagination a {background: #fff; /* 背景颜色 */border: 1px solid #ccc; /* 边框颜色 */color: #333; /* 文字颜色 */font-size: 14px; /* 字体大小 */padding: 6px 8px; /* 内边距 */margin: 0 2px; /* 外边距 */border-radius: 3px; /* 圆角 */text-decoration: none; /* 去掉下划线 */
}.pagination a:hover {color: #4fc08d; /* 鼠标悬停文字颜色 */border: 1px solid #4fc08d; /* 鼠标悬停边框颜色 */
}.pagination a.page-num-current {color: #fff; /* 当前页文字颜色 */background: #4fc08d; /* 当前页背景颜色 */border: 1px solid #4fc08d; /* 当前页边框颜色 */pointer-events: none; /* 禁用点击 */
}