2009年2月17日 星期二

一分鐘讓你的部落格也有數字分頁效果


2011.3.18更新
因為後來Blogger官方推出自動分頁機制,以下的方法已不太適用,同常要用官方的繼續閱讀,且圖片不能太多,或許可以發揮作用,可以參考官方的說法 http://buzz.blogger.com/2010/02/auto-pagination-on-blogger.html

部落格數字分頁效果(Page-Navigation-Menu)其實很多人在其他部落格系統都有看過,而Blogger是採用較舊及較新的文章來導引讀者,可是對於想隨機跳到比較早的文章去閱讀的朋友,就沒法完成這個要求,要重新載入頁面很多次才可完成,所以綸太郎才會自己製作一個網站目錄供網友查詢之前的文章,來減少這方面的困擾。

這個數字分頁功能,在首頁及文章分類頁面可達成,但在文章分類頁面,則非設定的部份,有一些小Bug,這部分好像無解,而單篇文章仍舊是維持原有的較新及較舊的文章連結,另外對於網誌存檔這部份也沒法發揮功能,這個東西之前我在Blogger Buster: Numbered Page Navigation for Blogger的文章裡有看過,並且測試過,但是有一些小問題,分頁效果怪怪的,而且很複雜,所以沒有介紹給大家,這次找到另一種方法,只要增加一個網頁元素小工具就可達成,一分鐘你的部落格就有了數字分頁效果,簡單又快速,真的很神奇。

這是原先的格式,

如何做呢? 進入後台→版面配置→網頁元素→新增小工具→Html/JavaScript
然後放入以下程式碼,然後將這個小工具拖拉到本文區下方,按下儲存即可完成。

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

5樓的網友暗夜咆哮表示安裝無法成功,所以將程式碼裡的粗體及顏色註記拿掉,因為有可能會造成無法顯示。

重點是裡面的
var pageCount = 5;

這個數字要和你一個頁面顯示的文章數設定是要一樣的,譬如你設7篇,然後這個Hacks設5篇,就會導致第二頁,他會從倒數第六篇顯示,那就會和前一頁重複了,而造成錯誤。

var displayPageNum=3;,這個語法應該是在你選擇的頁面前後要出現幾頁顯示,譬如我有8頁,當我點到頁面第4頁,如果我設定
var displayPageNum=2,就會出現如下排列,前後各顯示2頁。
2 3 4頁 5 6

其他的CSS文字樣式部分則可自己修改成你喜歡的顏色和大小,甚至加上背景圖案,如果要改成中文,紅色的部分都是相關的程式碼,可以自己修改,例如,
var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First'; 改成首頁
var endPageWord = 'Last'; 改成末頁
var upPageWord ='Previous'; 改成前頁
var downPageWord ='Next'; 改成下頁

將它改成你要的中文字即可。

還有找到這段
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
我把Page改成"頁數",of改成"之"。

這是我簡單修改過後的格式,



如果你的網頁背景是黑色的,記得更改
.showpageArea a {
.showpageNum a {
將原先的黑色字color:#000000;改成灰色的,或是其他顏色,color: #666666;
才不會一片黑色,看不到字。

不過這個元件會稍微影響部落格載入的速度,所以我測試過後,如果網站速度不理想我就會拿掉,但我想還是有人會有這方面的需要,大家參考看看。

69 則留言:

  1. 版面換了!!
    有數字分頁看起來比較專業些 XD

    回覆刪除
  2. 不錯的功能吔,有空也來修改一下,感謝綸太郎的教學!

    回覆刪除
  3. 旅美熟姐又入圍藍眼,恭喜恭喜,功能如果跑太慢,我可能會拿掉,觀察中,很像WordPress。

    To KJpiece,還不錯的功能,想說可不可改得漂亮些。

    回覆刪除
  4. 太厲害了,連這都能客制的出來

    回覆刪除
  5. 請教一下~我依照上面的作法,卻不清楚哪邊錯了?為什麼網頁沒有顯示出分頁?
    是否要選擇"豐富本文"呢?
    還是說必須放在哪個位置?我是放在網誌文章那邊

    回覆刪除
  6. To,暗夜咆哮,你再重新安裝看看,應該可以了。

    回覆刪除
  7. 這個功能滿實用的耶~
    不知道速度會差多少, 最近感覺自己的部落格好像越來越慢, 要不要加這個真的需要好好考慮...

    回覆刪除
  8. 真的很實用,但是我可能會拿掉,因為我有做網站目錄,第一次載入的速度較慢,後來的應該就比較好。
    給4樓的Kevin Tsai,沒有厲害,只是照著安裝而已。

    回覆刪除
  9. 感謝大大~安裝成功了,另外,因為小弟CSS不熟(以前我學的時候沒這東西),想問說"var displayPageNum=3;"
    這個語碼有作用嗎?我改成7...也好像沒差?

    回覆刪除
  10. 他的意思我猜應該是在你選擇的頁面前後要出現幾頁顯示,譬如我有8頁,當我點到頁面第4頁,如果我設定var displayPageNum=2,就會出現如下排列,前後各顯示2頁。
    2 3 4頁 5 6

    回覆刪除
  11. 嗯嗯...剛剛我有試過,的確是頁數點選的數量。
    要麻煩大大一下~因為不知道改哪邊...
    就是啊...我發現我安裝後,像是頁數123可能只能看到1 (空格) (空格) 下一頁....
    恩...不知道您懂不懂我的意思...只有把游標移到那邊,才會顯示數字2或3這樣....
    請問要怎麼修正呢?

    回覆刪除
  12. 因為你的底是黑色的,如果沒有白色的背景,黑字和黑背景就會混在一起,看不到什麼,找到
    .showpageArea a {和
    .showpageNum a {
    把color從黑色改#000000成灰色#666666,會比較配合你的黑背景
    color: #666666;

    回覆刪除
  13. 唷唷....大大說的有好幾個~我都改了~
    現在已經OK了
    謝啦~ ^^

    回覆刪除
  14. 改好就好,黑背景套用一些元件還真有點麻煩。

    回覆刪除
  15. 多谢太郎,教主也改好了,在公告还谢谢你啦~~

    回覆刪除
  16. 我也是提供看到的的Hacks資訊,不過因為影響網頁速度,目前已經拿掉了。

    回覆刪除
  17. 十分感謝,因為你的文章,讓小弟的部落更好了!

    回覆刪除
  18. 你的部落格很有趣,不過字體在firefox有點小,我記得露天拍賣有貼紙提供,你可以直接貼在blogger的邊欄明顯處。

    回覆刪除
  19. 你好,我想在显示的时候不显示上页和下页,(因为既然有页码了这个就没多大用了,还占地方)请问怎么取消不让显示!!

    回覆刪除
  20. 你可能要請問Hacks的作者了,我能想到的只有把Previous和Next用空白代替,但還是會有框框顯示。

    回覆刪除
  21. 補充一下,上面那個程式碼是給域名 xxxx.blogspot.com的專用,假如域名有改過的話要修改一下
    ex:域名: http://xavier.twbbs.org/
    要把
    thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
    修改成
    thisUrl.substring(thisUrl.length-11,thisUrl.length)==".twbbs.org/";

    不過length-14變成11我不知道是怎麼推算出來的,目前使用的方法是從14慢慢往前推,一個一個試,是到成功為止

    回覆刪除
  22. 謝謝你提供的資訊,供有改域名的人參考。

    回覆刪除
  23. 感謝分享~~
    拿來用囉!!這樣BLOG比以前人性化呢!

    回覆刪除
  24. 不好意思,
    我好像沒辦法顯示出來呢@@

    不知道是哪裡出問題呢?

    回覆刪除
  25. 你設5篇文章才會出現分頁,你的部落格只有三篇,就沒法看到效果。

    回覆刪除
  26. 我用了,好像没用。。。很郁闷

    回覆刪除
  27. 分頁如果不行可以參考原始網頁的說明,他有其他作法。

    回覆刪除
  28. 我按照你说的方法成功了,数字分页效果实现了。但是我想问一下,我在我的博客中发一些代码的时候显示不出来,我按网上的办法试了一下,但是没有效果。你能跟我说说你那个code block效果是怎么实现的么?就是在blogger中发些代码的时候不会被过滤掉,显示不出来。希望你能说详细一点。因为在这方面我不在行。我的邮箱是softfly365@163.com。真诚希望你能给发个解决办法。谢谢啦~~

    回覆刪除
  29. 你好,感谢你的解答。对于博客分页,我还想问个问题,就是我现在弹分页是显示在博客文章下方,有没有办法让它在博客弹上下方同时显示啦,我觉得这个效果更好一些啦?

    回覆刪除
  30. To 滴泪斩:再新增一個小工具,放入語法,把它拖曳到文章上方,按下儲存即可。

    回覆刪除
  31. 什么意思?能说具体点么?再添加一个工具栏会影响博客的载入速度吧??
    难道就不能通过修改原来的代码,出现两个分页栏么?

    回覆刪除
  32. 就是兩個相同的分頁小工具,一個放在文章區塊上方,一個放在文章區塊下方,如果想修改代碼,因為我也不會寫程式,所以請詢問原作者有無其他更好的作法。

    回覆刪除
  33. 十分感谢!~那我想请问一下这个显示数字分页效果的原作者地址是什么啦?

    回覆刪除
  34. 文章最後有寫-參考來源的網站就是了。

    回覆刪除
  35. 为什么我感觉你们的博客访问速度都很快,而我的访问速度却很慢,你有没有相关的教程,教怎么优化博客的访问速度的??

    还有我在你的一篇文章中看到文章显示摘要的方法。我不知道到底使用哪一种?感觉第2种很方便,第1种有点麻烦。不过好像第2种有些影响速度。那我在这里想问一下的就是两种方法的访问速度区别大不大??第一种是不是对速度提高很有好处?

    回覆刪除
  36. 裝太多外掛或是太多圖片會跑得慢,第二種是全文跑完,再縮摘要,所以當然會比較慢,不然就是你首頁不要放太多篇,用第二種或許會快些,我是利用第一種,我想是圖片影響了速度,跑圖本來就會比較慢。

    回覆刪除
  37. 今天发现好像这个显示翻页的东西有个错误,不知道你能解决么?
    就是假如我定义var displayPageNum=3
    如果我有7页的话
    在第1页的时候应该是
    1页 2 3 4
    但是当我想点到第2页去的时候,它不是到第2页,而是到第4页去啦。
    显示的是
    1 2 3 4页 5 6 7
    请问你知道有什么解决方法么?

    回覆刪除
  38. 我想內容應該顯示的是第二頁,只是他會將中間的數字反黑而已。
    有另一種可跳頁的你可以看看
    http://www.xavierliu.com/2009/04/blogger-page-menu.html

    回覆刪除
  39. 内容不是第2页,内容就是第4页的。请问有什么办法解决这个问题么?我不太想改用另一种方法。怕该了以后有问题不好恢复。
    还有我要说的就是我感觉好像是这个定义var displayPageNum=
    在作怪。我定义3,点第2页,它就到第4页,似乎它判断前面要空3个数,那么第2页就是第4页啦,请问你有什么解决办法没?

    回覆刪除
  40. 我裝的時候是正常的,我不曉得為什麼你的會有錯誤,是不是後台基本設定每頁顯示的篇數不是8篇,不然我也不知哪出錯了。

    回覆刪除
  41. 对了,我装了个继续阅读懒人加强版显示文章摘要的JS,我不知道是不是这个原因。因为一个是显示首页摘要,一个是显示分页,感觉功能有点相似。我现在亟待解决这个问题。
    对了,你用什么即时聊天工具么?
    能够在线跟你交流么??

    回覆刪除
  42. 你跟13樓的用的是同一個繼續閱讀,我看他的顯示很正常,我沒有用聊天工具,其實很多Hacks工具我只是參考別人的作法成功後,把它寫下心得分享,真正碰到程式有問題還是要請教原作者,因為我不懂程式語言或是javascript那些東西。

    回覆刪除
  43. 我在這裡看到一個很棒的數字分頁~趕緊來跟你分享~^^
    http://www.xavierliu.com/2009/04/blogger-page-menu.html

    回覆刪除
  44. 謝謝你的熱心分享,39樓已經有跟網友提過這個Hacks了,不過我自己是還沒有試,我也常去Xavier的網站去看。

    回覆刪除
  45. sorry留言錯地方
    我按照您上面的說法 顯示的文章數我也有修改的和設定一樣
    但是發生一個新問題 就是文章 會不見
    譬如說 本來應該是ABCDEF
    但是 放了之後變成ABEF
    怎會這樣呢?
    ps.我理財那三篇是同一天放的 和這有關嗎???

    回覆刪除
  46. 抱歉,因為Hacks是用JavaScript跑的,我只會套用,再修改css外觀語法,有錯誤可能要請教原作者,或是參考44樓Xavier的方法看看。

    回覆刪除
  47. 瞭解^^ 看來只能忍痛把 她刪除了
    不然文章 不見 更困擾><
    還是感謝^^

    回覆刪除
  48. 我想問一下為何分頁的語法已貼上去了,但有時候語法一多了,還是不知道出現了什麼問題,又變成沒有分頁…效果

    http://petals-leaves.blogspot.com/?zx=44c7bfc5c33b4274

    是不是有其它語法衝途到了

    回覆刪除
  49. To草葉集,這問題難倒我了,因為程式碼不是我設計的,加上很多Java可能會有衝突,而Java這部分我也不懂,所以沒法回答你的問題,抱歉,44樓有相關的網站可以參考,或許對你有幫助。

    回覆刪除
  50. 我把程式碼拖拉到本文區下方

    成了这样

    http://i318.photobucket.com/albums/mm431/hskj127/other/12.jpg

    請問要怎麼解決?謝謝!

    回覆刪除
  51. 將.post-footer {
    裡面的float: left;刪除。

    回覆刪除
  52. 版形真的對我來說是個死門
    可以幫我看個問題嗎

    我的 較新的文章 首頁 較舊的文章

    不會在版型的下方
    會變成在文章的右方
    要怎麼修正呀

    請幫幫忙喔

    http://it.notes.tw/

    回覆刪除
  53. 以前有人問過類似的問題,在
    #blog-pager { 加上一行overflow:visible; /* add */
    看看有沒有效。

    回覆刪除
  54. 我看他的原始模板展示就有這個Bug了,我試過後,在
    #blog-pager {
    text-align: center;
    }
    裡面加上clear: both;
    清除格式的語法,應該就ok了。
    原先請你加的overflow:visible; /* add */這都刪除,

    回覆刪除
  55. 請問一下太郎

    不管是showpageArea 或 showpageNum

    backgroundd-color 只能顯示黑色嗎???

    http://elvisil.blogspot.com/

    回覆刪除
  56. backgroundd-color 只能顯示黑色嗎???
    可以自己設定顏色。

    回覆刪除
  57. 我部落格跟上面的設定只能設定到6篇~~
    當我輸入15時
    但是畫面上最多只會跑大最大值7篇
    我去找了很多種方法就是沒有辦法如我所願出現15篇

    回覆刪除
  58. 因為後來Blogger官方推出自動分頁機制,你要用官方的繼續閱讀,且圖片不能太多,可以參考官方的說法 http://buzz.blogger.com/2010/02/auto-pagination-on-blogger.html

    回覆刪除
  59. 感謝 今天原本一直苦惱這個問題想說模板被我改壞了但找不出原因,原來是var pageCount沒和
    後台設定的一樣 :)

    回覆刪除
  60. 感谢分享,已经使用您提供的方法成功实现分页。哦也

    回覆刪除
  61. 有什么办法也让 标签 和 归档 里面的文章也 分页机制吗?

    回覆刪除
  62. 可能要問寫這個Hack的人吧,這部分我就不清楚。

    回覆刪除
  63. 請問這個功能要如何也在按下某個標籤之後也適用?
    我安裝好後,在首頁有效果,但是按進標籤裡的文章,就變回預設的了。

    回覆刪除
    回覆
    1. 這方面要請教會程式碼的,我部分我不會。

      刪除
  64. 這個程式碼被 Chrome 判定不安全。
    我把所有埋進去的語法通通挖了出來,當我把數字分頁挖出來時,不安全警告就解除了。再把數字分頁埋進去,警告又出現了,除了這個語法外,我把其他的語法再埋回去,都沒出現不安全警告,只有這個數字分頁會出現。

    請問綸太郎,這個你怎麼看?

    回覆刪除
    回覆
    1. 原作者的網頁已刪除,如果有疑慮就不要使用了。

      刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能