自定义Typecho分页导航
代码:
<?php $this->pageNav('|<', '>|',10,'',array('wrapTag' => 'div', 'wrapClass' => 'page-nav','itemTag' =>'li','currentClass' => 'current',)); ?>
wrapTag
外层包裹标签名,默认 ol,wrapClass
外层包裹类名itemTag
内层标签名, 默认 li,textTag
直接输出文字的标签名,currentClass
当前聚焦类名,prevClass
上一页类名,默认为prevnextClass
下一页类名,默认为next
静态html:
<div class="page-nav">
<li class="prev"><a href="http://pinsily.site/index.php/page/1/">|<</a></li>
<li><a href="http://pinsily.site/index.php/page/1/">1</a></li>
<li class="current"><a href="http://pinsily.site/index.php/page/2/">2</a></li>
<li><a href="http://pinsily.site/index.php/page/3/">3</a></li><li><a href="http://pinsily.site/index.php/page/4/">4</a></li>
<li class="next"><a href="http://pinsily.site/index.php/page/3/">>|</a></li>
</div>
自定义CSS:
.page-nav {
list-style-type: none;
color: #000000;
text-align: center;
}
.page-nav A{color:#555555;text-decoration: none;}
.page-nav .current {
border-radius: 100%;
color: #000000;
border: 1px solid #4CAF50;
box-shadow: 1px 2px 3px #ddd;
}
.page-nav A:hover{color: #ffffff;background: #4CAF50;border-color: #000000;}
.page-nav li {
transition: background-color .3s;
border: 2px solid #ddd;
display: inline-block;
float: none;
padding: 5px 10px 5px 10px;
margin:0;
text-decoration: none;
}
参考链接:
https://www.runoob.com/bootstrap/bootstrap-pagination.html
https://www.sioe.cn/yingyong/yanse-rgb-16/
https://www.runoob.com/css3/css3-pagination.html