pbootcms 创建页面时 希望列表元素就是单独元素,不生成栏目页,栏目详情页
【相关推荐】
如果有需求需要对分页条的内容进行自定义,那么看第二种:独立的分页元素标签
以本站的分页代码为例:
//通过{@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}