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 >1</a></li><li><a >2</a></li><li><span>...</span></li><li><a >5</a></li><li class="next"><a >?</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偷下來就行了

本文轉自：https://qqdie.com/archives/typecho-custom-pagination-style.html

總結

以上是生活随笔為你收集整理的Typecho 自定义分页样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。