要自定義分頁(yè)，首先要使用分頁(yè)。 根據(jù)PbootCMS官方文檔，分頁(yè)標(biāo)簽有兩種：系統(tǒng)內(nèi)置的完整分頁(yè)條 獨(dú)立的分頁(yè)元素標(biāo)簽，可自由搭配使用 查看源碼 {page:current}、{page:count}、{page:rows}...等 |
第一種：系統(tǒng)內(nèi)置的完整分頁(yè)條代碼如下： <div class="paging">{page:bar}</div>
|
而且，每個(gè)元素都已經(jīng)擁有了自己的樣式名稱(chēng)，例如：.page-status、.page-inde...等。
接下來(lái)只要寫(xiě)上對(duì)應(yīng)的CSS進(jìn)行美化就可以了。 例如： /* 分頁(yè)樣式 */
.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; } |
處理后效果： 
第二種：獨(dú)立的分頁(yè)元素標(biāo)簽
如果有需求需要對(duì)分頁(yè)條的內(nèi)容進(jìn)行自定義，那么看以本站的分頁(yè)代碼為例： //通過(guò){page:count}來(lái)判斷當(dāng)前列表的分頁(yè)數(shù)量，如果超過(guò)1頁(yè)則顯示分頁(yè)條
{pboot:if('{page:count}' > 0)} //分頁(yè)容器 <div class="uk-text-center frontier-paging"> <ul class="uk-clearfix"> //{page:index}以及{page:pre}指定首頁(yè)和上一頁(yè)的鏈接地址，并且可以在a標(biāo)簽中自由設(shè)置首頁(yè)或者上一頁(yè)的文字 <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> //分頁(yè)條 {page:numbar} //同首頁(yè)和上一頁(yè)，這里是尾頁(yè)和下一頁(yè) <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} |
添加樣式美化： /* 分頁(yè)樣式 */
.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; } |
處理后效果： 
總結(jié)：還是以前所說(shuō)的，PbootCMS的各種標(biāo)簽已經(jīng)非常豐富，能不能做出好的東西，就看能不能熟悉標(biāo)簽，自由組合來(lái)達(dá)成各種需求。 | 
大家都在看
