v 一分鐘讓你的部落格也有數字分頁效果 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...