PbootCMS制作个性分页条之单页/总页数效果（PbootCMS 分页条实现与美化指南）-尧图网站建设

📅 发布时间：2026/6/26 10:01:46

如何在 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; /* 禁用点击 */
}

三、注意事项

分页条显示条件：
- 使用 {pboot:if({page:rows}>0)} 判断是否有数据，避免在无数据时显示分页条。
兼容性优化：
- hidden-sm 类用于隐藏某些元素（如首页和尾页），可根据实际需求调整。
SEO 优化：
- 确保分页链接正确生成，便于搜索引擎抓取更多页面内容。
响应式设计：
- 如果需要适配移动端，可以通过媒体查询调整分页条的布局和样式。