Pbootcms自定义分页样式,适用于多种环境

系统自带分页效果

pbootcms  程序自带的分页样式为：   {page:bar}  ，时间长了发现难以满足不同网站仿制时分页的要求，系统自带标签如下，可以灵活搭配使用；

{page:bar}	系统内置的完整分页条
{page:current}	当前页码
{page:count}	总页数
{page:rows}	总数据行数
{page:index}	首页链接
{page:pre}	前一页链接
{page:next}	下一页链接
{page:last}	尾页链接
{page:status}	分页状态信息
{page:numbar}	数字条,数字带class名称为page-num，当前的同时还带page-num-current
{page:selectbar}	下拉选择条

可以在系统的样式基础上，自己再加点CSS效果美化下；

/* 分页样式 */

.paging { margin-top: 32px; font-size: 14px; }

.paging > span { margin: auto 16px; }

.paging .page-numbar { margin: auto 0; }

.paging .page-numbar .page-num,

.paging .page-index,

.paging .page-pre,

.paging .page-next,

.paging .page-last { display: inline-block; margin: auto 4px; padding: 2px 12px; border: 1px solid #EEE; border-radius: 2px; }

.paging .page-numbar .page-num-current,

.paging .page-numbar .page-num:hover { border-color: #8667F7; color: #8667F7; }

自定义分页效果

如果有需求需要对分页条的内容进行自定义，那么看第二种：独立的分页元素标签

以本站的分页代码为例：

//通过{@page:count}来判断当前列表的分页数量，如果超过1页则显示分页条

{@pboot:if(@page:count}>0)}

//分页容器

<div class="uk-text-center frontier-paging">

<ul class="uk-clearfix">

 //{@page:index}以及{@page:pre}指定首页和上一页的链接地址，并且可以在a标签中自由设置首页或者上一页的文字

<a class="first" href="{@page:index}"><i class="fa fa-angle-double-left"></i></a>

<a class="uk-visible@s prev" href="{@page:pre}"><i class="fa fa-angle-left"></i></a>

//分页条

 {@page:numbar}

//同首页和上一页，这里是尾页和下一页

<a class="uk-visible@s next" href="{@page:next}"><i class="fa fa-angle-right"></i></a>

<a class="last" href="{@page:last}"><i class="fa fa-angle-double-right"></i></a>

</ul>

</div>

{@/pboot:if}

添加样式美化：

/* 分页样式 */

.frontier-paging { margin-top: 32px; }

.frontier-paging ul { display: inline-block; vertical-align: bottom; }

.frontier-paging ul span, 

.frontier-paging ul a { display: block; float: left; margin: auto 2px; padding: 4px 12px; background: #FFF; box-shadow: 0 0 8px rgba(0,0,0,0.07); border-radius: 2px; font-size: 14px; color: #999; }

.frontier-paging ul a.page-num-current,

.frontier-paging ul a:hover { background: #775BFF; color: #FFF; }

效果如下：

PbootCMS的各种标签已经非常丰富，能不能做出好的东西，就看能不能熟悉标签，自由组合来达成各种需求。

特别注意：使用PbootCms搭建，标签中请自行删除@符号，文中@符号防止解析。

新增方法三：

数字条自带a链接标签代码和选中效果标签

数字带class名称为 page-num，当前页自带 page-num-current 样式

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

CSS样式代码

需要给数字条里的span标签单独设置样式，使分页条更美观好看

数字条样式分页条适合企业网站，行业网站使用

/* ----- 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;
}
.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;
}
/* ----- PB分页数字条效果 结束 ----- */