MENU

typecho 利用bootstrap实现完美自定义分页

February 8, 2022 • Read: 416 • 代码,技术

本文共 2403 字符

目前typecho最完美的解决方案了,因为百度只能看到固定思维的代码。

先看看实际生成的html代码截图,干净到让人窒息

page.png

完全的自定义,包括给li元素加上class,给a元素加上class,给上一页下一页加上class,去除typecho自带用于表示更多的li标签。甚至里面的内容我也能添加一些文字。

废话不多说,上源码:

<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>

主要方式就是利用正则修改,一劳永逸,直接从生成的内容上改变,不用再js一个个的匹配添加调整了,释放你的想象力。

这里放一些正则的一些通配符:

常用元字符

代码 说明
. 匹配除换行符以外的任意字符
w 匹配字母或数字或下划线
s 匹配任意的空白符
d 匹配数字
b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
常用限定符

代码/语法 说明

  • 重复零次或更多次
  • 重复一次或更多次
    ? 重复零次或一次

{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
常用反义词

代码/语法 说明
W 匹配任意不是字母,数字,下划线,汉字的字符
S 匹配任意不是空白符的字符
D 匹配任意非数字的字符
B 匹配不是单词开头或结束的位置
1 匹配除了x以外的任意字符
2 匹配除了aeiou这几个字母以外的任意字符
常用模式修正符

代码/语法 说明
i 表示在进行匹配的时候不区分大小写
m 多行识别.即将字符串视为多行,不管是那行都能匹配
s 将字符串视为单行,转义回车换行符作为普通字符
g 表示全局匹配
x 将模式中的空白忽略
A 强制从目标字符串开头匹配
D 强制尾部无任何内容.若使用$限制结尾字符,则不允许结尾有换行
U 禁止贪婪匹配,只匹配最近的一个字符串(不重复匹配)
e 配合PHP函数preg_replace()使用,可以把匹配来的字符串当作正则表达式执行
要想理解为什么,首先你要了解$this->pageNav()这段代码做了什么,具体你可以百度,很多人自定义都是用的这个,这里我放一下自己常用的解释:

<!-- page翻页
wrapTag 外层包裹标签名, 默认ol
wrapClass 外层包裹类名
itemTag 内层标签名, 默认li
textTag 直接输出文字的标签名
currentClass 当前聚焦类名
prevClass 上一页类名
nextClass 下一页类名 -->
基本就ok了,只要领悟能力够应该很容易就从源码中发现怎么自定义了。


  1. x
  2. aeiou
Archives QR Code
QR Code for this page
Tipping QR Code