PbootCMS制作个性分页条之单页_总页数效果（PbootCMS 分页条实现与美化指南）
如何在 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 优化：
- 确保分页链接正确生成，便于搜索引擎抓取更多页面内容。
-
响应式设计：
- 如果需要适配移动端，可以通过媒体查询调整分页条的布局和样式。
更新时间：2025-12-06 17:50:25