Typecho更好的翻页样式

暂无AI摘要

摘要由智能技术生成

我们有些时候再做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 下一页类名 -->