PbootCMS实现数字条分页样式效果（PbootCMS 实现数字条分页样式效果及自定义方法）

在使用 PbootCMS 开发网站时，分页功能是常见的需求之一。数字条分页是一种直观且用户友好的分页样式，适用于文章列表、产品展示等场景。本文将详细介绍如何通过 PbootCMS 自带的分页组件实现数字条分页效果，并通过 CSS 自定义其外观。

2. 数字条分页代码实现

2.1 分页代码示例

在需要分页的模板文件中添加以下代码：

<!-- 分页 -->
{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}

代码解析

代码片段	功能说明
`{pboot:if({page:rows}>0)}`	判断当前是否有数据，若无数据则显示“暂无数据！”提示信息。
`{page:numbar}`	生成数字条分页效果，默认包含页码链接和当前页标记。
`class="page-num"`	普通页码的默认类名。
`class="page-num-current"`	当前页码的默认类名，用于高亮显示当前页。

3. 自定义分页样式

3.1 默认样式分析

PbootCMS 的数字条分页效果默认带有以下特性：

每个页码为 <a> 标签，当前页码为 <span> 标签。
当前页码的类名为 page-num-current，可通过 CSS 高亮显示。

3.2 自定义 CSS 示例

以下是一个完整的 CSS 样式代码，用于美化数字条分页效果：

/* ----- 数字条分页样式 开始 ----- */
.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;
  text-decoration: none;
}

.pagination span {
  color: #333;
  font-size: 14px;
  padding: 8px 2px;
  margin: 0 5px;
  border-radius: 3px;
}

.pagination a:hover {
  color: #4fc08d;
  border: 1px solid #4fc08d;
}

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

样式解析

样式规则	作用
`.pagination a`	设置普通页码的背景色、边框、字体颜色等基础样式。
`.pagination a:hover`	定义鼠标悬停时的交互效果（如改变颜色和边框）。
`.pagination a.page-num-current`	高亮显示当前页码，设置背景色为绿色（`#4fc08d`），文字颜色为白色。

4. 注意事项

注意事项	说明
数据判断	使用 `{pboot:if({page:rows}>0)}` 确保在无数据时不会显示分页条。
样式覆盖	如果引入了第三方框架（如 Bootstrap），需注意避免样式冲突，必要时增加更高优先级的选择器。
响应式设计	可通过媒体查询调整分页样式，确保在移动端显示良好。

5. 示例效果

HTML 输出示例

<div class="pagebar">
  <div class="pagination">
    <a class="page-item page-link" href="/?page=1" title="首页">首页</a>
    <a class="page-item page-link" href="/?page=2" title="上一页">上一页</a>
    <a class="page-num" href="/?page=1">1</a>
    <span class="page-num-current">2</span>
    <a class="page-num" href="/?page=3">3</a>
    <a class="page-item page-link" href="/?page=3" title="下一页">下一页</a>
    <a class="page-item page-link" href="/?page=10" title="尾页">尾页</a>
  </div>
</div>