Typecho更好的翻页样式

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/* 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下的翻页(记得替换分类)

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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()这段代码做了什么,具体你可以百度,很多人自定义都是用的这个,这里我放一下自己常用的解释:

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

来源:https://yunfanch.com/


Typecho更好的翻页样式
http://yoursite.com/2022/08/17/typecho/pageination/
作者
雨停之後
发布于
2022年8月17日
许可协议