PbootCMS 分页条效果优化数字条分页样式美化教程

在使用 PbootCMS 搭建企业网站或行业资讯站时，列表页分页是一个非常容易被忽略，但又极其影响用户体验的细节。

默认分页样式较为朴素，通过简单的 HTML 结构与 CSS 样式优化，我们就可以实现一个清爽、专业的数字条分页效果。

家兴网络将介绍 PbootCMS 数字分页条的调用方法及样式美化方案，适合企业官网、行业网站、资讯站使用。

一、PbootCMS 数字分页条特点说明

PbootCMS 内置的 {page:numbar} 数字条具备以下特性：

• 数字页码自带 a 链接标签

• 当前页自动使用 span 标签包裹

• 数字页码默认带有类名：

• 普通页：page-num

• 当前页：page-num-current

这也为我们单独控制 当前页样式 与 普通页样式 提供了便利。

二、分页模板代码示例（数字条）

将以下代码放入 列表页模板（如 list.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>
      {page:numbar}
      <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:numbar}：输出数字分页条

• {page:pre} / {page:next}：上一页 / 下一页

• {page:index} / {page:last}：首页 / 尾页

• 当分类下无数据时，自动显示提示信息，增强用户体验

三、分页数字条 CSS 样式美化

重点在于：
单独设置数字条中 span 标签样式（当前页）

将以下 CSS 添加到你的网站样式文件中（如 style.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: 8px 12px;
  margin: 0 5px;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* 数字条中的 span（当前页） */
.pagination span {
  color: #333;
  font-size: 14px;
  padding: 8px 12px;
  margin: 0 5px;
  border-radius: 3px;
}

/* 鼠标悬停效果 */
.pagination a:hover {
  color: #4fc08d;
  border: 1px solid #4fc08d;
}

/* 当前页样式 */
.pagination a.page-num-current,
.pagination span.page-num-current {
  color: #fff;
  background: #4fc08d;
  border: 1px solid #4fc08d;
}
/* ----- PB分页数字条效果 结束 ----- */

四、分页效果说明

美化完成后，分页条将具备以下效果：

• 数字分页 居中显示

• 当前页高亮显示（绿色背景）

• 鼠标悬停有颜色反馈

• 风格简洁、商务感强

• 非常适合 企业官网 / 行业网站 / B2B 站点

整体视觉更符合主流企业站设计规范。

五、常见优化建议

1. 移动端隐藏首页/尾页

• 可通过 hidden-sm 类配合媒体查询实现

2. 颜色统一

• 将 #4fc08d 替换为你网站的主色，保持品牌一致性

3. SEO 友好

• 分页链接为真实 URL，对搜索引擎抓取无影响

六、总结

PbootCMS 的分页功能本身已经非常完善，只需要稍作样式调整，就能让网站的细节体验提升一个档次。
数字条分页样式 简洁清晰，是企业网站和行业站点的首选方案。

如果你正在使用 PbootCMS，不妨按本文方法动手优化一下分页效果，让你的网站看起来更加专业。