王苏洋Blog 王苏洋的个人博客,一个爱折腾的普通人,记录,是为了不想遗忘。

Typecho文章页添加“上一篇/下一篇”功能

📃
typecho
第一步:在文章模板文件 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);
}
By 王苏洋 On