PbootCMS 分页条标签详解与样式定制技巧

一、分页条标签基础信息

描述项	说明
适用范围	所有执行了分页的页面
标签作用	输出分页代码
默认样式	系统内置完整分页条，支持直接定义 CSS 样式
自定义方式	可根据需求调整 HTML 结构和样式

---

二、分页条标签分类

（1）系统内置分页条标签

标签名	描述	示例值
{page:bar}	系统内置的完整分页条	<div class="page-bar">...</div>
{page:current}	当前页码	3
{page:count}	总页数	10
{page:rows}	总数据行数	100
{page:index}	首页链接	域名/
{page:pre}	前一页链接	域名/?page=2
{page:next}	下一页链接	域名/?page=4
{page:last}	尾页链接	域名/?page=10
{page:status}	分页状态信息	共10页，当前第3页
{page:numbar}	数字条，带 page-num 和 page-num-current 类名	<a class="page-num page-num-current">3</a>
{page:selectbar}	下拉选择条（默认不显示）	<select>...</select>

---

三、分页条自带的样式类名称

（1）分页条样式类说明

样式类名称	描述	示例值
page-status	分页状态信息样式	<span class="page-status">共10页，当前第3页</span>
page-index	首页链接样式	<a class="page-index" href="域名/">首页</a>
page-pre	上一页链接样式	<a class="page-pre" href="域名/?page=2">上一页</a>
page-next	下一页链接样式	<a class="page-next" href="域名/?page=4">下一页</a>
page-last	尾页链接样式	<a class="page-last" href="域名/?page=10">尾页</a>
page-numbar	数字条整体容器样式	<div class="page-numbar">...</div>
page-num	数字条中的数字样式	<a class="page-num" href="域名/?page=3">3</a>
page-num-current	当前页数字样式	<a class="page-num page-num-current">3</a>
page-select	下拉选择条样式（默认隐藏）	<select class="page-select">...</select>

---

四、自定义分页条与前端调试

• 自定义方式：如果需要完全自定义分页条，可以自行编写 HTML 结构，并结合系统提供的分页数据标签（如 {page:current}、{page:count} 等）进行输出。
• 前端调试：可以通过浏览器的开发者工具（F12）查看系统生成的分页条 HTML 结构和样式类名称，从而快速定位并调整样式。