Typecho更好的翻页样式

首页代码276 字

我们有些时候再做Typecho主题的时候,分页一般随手会使用默认系统自带的,自带的分页类样式,有时不能满足项目的要求,所以特地花时间美化了一下,使其更简洁、美观。现在就整理出来这里主要分享一下,按下面方法设置,然后清空浏览器缓存重新打开页面,你就可以看到效果了。


下面的代码放到你的主题CSS里。

/* Pagination */
     
.pagination {
  padding: 0;
  text-align: center;
}

.pagination li {
  display: inline-block;
  margin: 0 0.125em;
}
     
.pagination > li > a, .pagination > li > span {
  background: #ffffff;
  padding: 0.45rem 0.75rem;
  font-family: inherit;
  font-weight: 500;
  border-radius: 50px;
  color: #ec7d98;
  border: 1px solid #ec7d98;
  text-decoration: none;
  line-height: 2.5;
}
     
.pagination > li > a:hover, .pagination > li > span:hover {
  color: #d25372;
  border: 1px solid #d25372;
}
     
.pagination > li.active > a {
  color: #ffffff;
  background: #ec7d98;
  border: 1px solid #ec7d98;
}
     
.pagination > li.active > a:hover {
  background: #d25372;
  border: 1px solid #d25372;
}

用下面代码替换你主题下index.php下的翻页(记得替换分类)

<?php $this->pageNav('&laquo;', '&raquo;', 1, '…', array('wrapTag' => 'ul', 'wrapClass' => 'pagination', 'itemTag' => 'li', 'textTag' => 'span', 'currentClass' => 'active', 'prevClass' => 'prev', 'nextClass' => 'next')); ?>

颜色不喜欢可以自行更换,改CSS下代码即可。

<nav class="my-5">
    <?php
      ob_start(); 
      $this->pageNav('&laquo;','&raquo;', 1, '', array('wrapTag' => 'ul', 'wrapClass' => 'pagination pagination-rounded mb-0 justify-content-center', 'itemTag' => 'li', 'textTag' => 'span', 'currentClass' => 'active', 'prevClass' => 'prev', 'nextClass' => 'next'));
     $content = ob_get_contents();
     ob_end_clean();
     $content = preg_replace("/<li><span>(.*?)<\/span><\/li>/sm", '', $content);
     $content = preg_replace("/<li [class=\"active\"]+>(.*?)<\/li>/sm", '<li class="page-item active">$1</li>', $content);
     $content = preg_replace("/<li [class=\"prev\"]+>(.*?)<\/li>/sm", '<li class="page-item">$1</li>', $content);
     $content = preg_replace("/<li [class=\"next\"]+>(.*?)<\/li>/sm", '<li class="page-item">$1</li>', $content);
     $content = preg_replace("/<li>(.*?)<\/li>/sm", '<li class="page-item">$1</li>', $content);
     $content = preg_replace("/<a href=\"(.*?)\">(.*?)<\/a>/sm", '<a class="page-link" href="$1">$2</a>', $content);
     echo $content;
    ?>
</nav>

要想理解为什么,首先你要了解$this->pageNav()这段代码做了什么,具体你可以百度,很多人自定义都是用的这个,这里我放一下自己常用的解释:

<!-- page翻页
wrapTag 外层包裹标签名, 默认ol
wrapClass 外层包裹类名
itemTag 内层标签名, 默认li
textTag 直接输出文字的标签名
currentClass 当前聚焦类名
prevClass 上一页类名
nextClass 下一页类名 -->

云帆沧海
一个持续更新的个人博客,记录生活、工作、爱好的点点滴滴。
赞赏
OωO
开启隐私评论,您的评论仅作者和评论双方可见
评论 ( 6 )
  1. hi,你好呀,我从一篇教时光机的博客来,我想请教下你,你这里的轻语是怎么弄的呀,我的按照教程页面打开坏掉的0.0

    2020年10月02日 - 浙江省 回复
    1. 歲月安然 博主大人
      @kongsny

      我刚看你网站了,是却css文件了吧

      2020年10月02日 - 河北省 回复
      1. @歲月安然

        这个我就是按照毛毛的这个教程又弄了一遍,就是这个样子了0.0

        2020年10月02日 - 浙江省 回复
        1. 歲月安然 博主大人
          @kongsny

          是放主题CSS文件夹里了吗?

          2020年10月02日 - 河北省 回复
          1. @歲月安然

            是的,我用的VOID主题里面没有css文件夹,我创建了一个命名css文件,把那个放里面了,引用我倒是不知道放对没有,

            2020年10月02日 - 浙江省 回复
            1. 歲月安然 博主大人
              @kongsny

              时光机CSS对, 页面代码不全,没有页头 页尾。

              2020年10月02日 - 河北省 回复