QQ爹博客 QQ爹博客

Typecho 自定义分页样式

in Typecho 文章转载请注明来源!
typecho分页

typecho的这种分页样式设置最初我也是很迷茫的,所以我做的大部分模板都是只是用上一页和下一页,然而昨天翻出来看一下发现其实挺简单的,以前自己没有理解好。

其实这类文章在吕滔博客《Typecho 自定义分页样式》有讲,但是没有很细致的说明,甚至给出的代码本身有些小错误,所以我在这里细说下这个。

先上代码,然后对应的分析下
代码如下

<?php $this->pageNav('«', '»', 1, '...', array('wrapTag' => 'ol', 'wrapClass' => 'page-navigator', 'itemTag' => 'li', 'textTag' => 'span', 'currentClass' => 'current', 'prevClass' => 'prev', 'nextClass' => 'next',)); ?>

对应出来的的html如下

<ol class="page-navigator"><li class="current"><a href="http://dmgogogo.com/page/1/">1</a></li><li><a href="http://dmgogogo.com/page/2/">2</a></li><li><span>...</span></li><li><a href="http://dmgogogo.com/page/5/">5</a></li><li class="next"><a href="http://dmgogogo.com/page/2/">»</a></li></ol>

由此可知

1,«»分别对应的是上一页按钮和下一页按钮,
2,数字1是分割范围(分几页),是当前页码附近可现实的页码数量,举个例子,当前页码为1,一共页码为5,那么上述代码输出的效果就是1,2,...5,如果当前页码为2呢,效果就是1,2,3,...5
3,...是分割字符,就是2中提到的那个省略页码的东西
4,wrapTag外层包裹标签名,默认ol,wrapClass外层包裹类名,itemTag内层标签名, 默认li,textTag直接输出文字的标签名,currentClass当前聚焦类名,prevClass上一页类名,nextClass下一页类名。
5,itemClass可以给其他页码的标签带上class

那么实战下目标就是下图,这个是我截取的wp某博客模板的样子
typecho分页

html代码如下:

<div class="page"> 
<a href="#">|<</a><span class="current">1</span><a href="h#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">>|</a>
</div>

那么typecho怎么做呢,首先分析到上面的代码外围包裹标签为div类名为page,然后又看到他的上一页下一页的符号分别为|<>|,页码间隔大概是10,内层标签没有,当前页码类为current

那么整理后代码大概是这样子的

 <?php $this->pageNav('|<', '>|',10,'',array('wrapTag' => 'div', 'wrapClass' => 'page','itemTag' => '','currentClass' => 'current',)); ?>

最后将对应的css偷下来就行了,等等!我为什么要说偷QAQ

谷歌广告
jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://qqdie.com/archives/typecho-custom-pagination-style.html (转载时请注明本文出处及文章链接)

typecho样式分页
发表新评论 取消回复
已有 21 条评论
  1. 原味奶茶
    原味奶茶
    回复

    感谢分享,涨姿势了。

  2. ohmyga
    ohmyga
    回复

    学习了qwq

  3. 欧文斯
    欧文斯
    回复

    文章可以分页吗

  4. 夏目贵志
    夏目贵志
    回复

    今天在仿一个主题 想到分页自定义 你这里有 就又来了2 333

    1. Jrotty
      Jrotty本文作者
      回复

      @夏目贵志 哈哈哈哈

  5. 尚寂新
    尚寂新
    回复

    这个怎么往里加这种data-type="mip" data-title="目标页面标题"的东西啊...不明白

    1. Jrotty
      Jrotty本文作者
      回复

      @尚寂新 不会233

  6. WangMuDu
    WangMuDu
    回复

    咳咳 为啥我的名字后面没有友链两个字呢

    1. WangMuDu
      WangMuDu
      回复

      @WangMuDu 就和添加博主一样的 要写ID 哈哈哈

    2. Jrotty
      Jrotty
      回复

      @WangMuDu 需要挨个加很麻烦@(太开心),所以不要求的就没加

前篇 后篇