QQ爹の博客 QQ爹の博客

Typecho 自定义分页样式

in 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下一页类名。

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

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样式 分页
发表新评论
已有 16 条评论
  1. 尚寂新
    尚寂新Android L谷歌浏览器
    回复

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

    1. Jrotty
      Jrotty本文作者Windows 10谷歌浏览器
      回复

      @尚寂新 不会233

  2. WangMuDu
    WangMuDuWindows 10谷歌浏览器
    回复

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

    1. WangMuDu
      WangMuDuWindows 10谷歌浏览器
      回复

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

    2. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @WangMuDu 需要挨个加很麻烦,所以不要求的就没加

  3. WangMuDu
    WangMuDuWindows 10谷歌浏览器
    回复

    我得跑

  4. 钛客志
    钛客志Windows 10谷歌浏览器
    回复

    学习了,博主

  5. CAISIDUO
    CAISIDUOWindows 10谷歌浏览器
    回复

    哇 评论区很热闹啊 我得跑

  6. 尚寂新
    尚寂新Windows 10谷歌浏览器
    回复

    其实我博客的翻页...就是从你主题里扣下来的

    1. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @尚寂新 快快,交钱免挨揍,楼下已经被揍得直喊“亚麻嘚”了

PREVIOUS NEXT
雷姆
拉姆