
第一步:在文章模板文件 post.php 或 page.php 中添加以下代码(通常放在文章内容下方):
<div class="zib-pagination">
<?php $this->thePrev(
'%s',
null,
array(
'title' => '← 上一篇', // 自定义文字/图标
'tagClass' => 'zib-prev' // 添加专属class
)
); ?>
<?php $this->theNext(
'%s',
null,
array(
'title' => '下一篇 →',
'tagClass' => 'zib-next'
)
); ?>
</div>
第二步:在CSS文件添加
/* 按钮样式 */
.zib-pagination {
display: flex;
justify-content: space-between;
margin: 40px 0;
}
.zib-prev, .zib-next {
padding: 12px 25px;
border-radius: 30px;
background: #f8f9fa;
border: 1px solid #eaecee;
transition: all 0.3s;
font-weight: 500;
}
.zib-prev:hover, .zib-next:hover {
background: #4a6cf7;
color: white;
border-color: #4a6cf7;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(74, 108, 247, 0.2);
}