[小工具]Blogger 數字分頁導覽 + Ajax 動態頁面載入效果

[小工具]Blogger 數字分頁導覽 + Ajax 動態頁面載入效果

A+
網站使用數字分頁功能,來方便訪客跳頁尋找、閱讀文章,這是各大網站很常見的設計。但 WFU BLOG 一直以來未採用,原因有二:

1. 如果不瞭解 Blogger 的機制,裝了這樣的外掛一定抱怨連連,請參考「Blogger官方自動分頁機制」,分頁的狀況常常會不如預期。

2. 本站屬於「資訊提供」的性質,訪客有七成來自搜尋引擎,主要目的為尋求問題的解答,平均停留頁數少,比不上旅遊、美食、心情抒發、插畫等等諸多類型的網站,訪客比較有輕鬆的心情進行跳頁式的閒逛。

不過最近一個案子需要分頁功能,且相信很多網站還是需要數字分頁的導覽效果,因此發佈此項研究成果。另外這個小工具能在跳頁時,頁面使用 Ajax 動態載入,算是獨家功能。以下先進行功能介紹,想直接安裝請跳至「二、準備動作」。





一、分頁歷史與功能介紹


1. 歷史

找資料的過程才發現,原來 Blogger 分頁功能的歷史還滿精彩的,有不少掠奪著作權的進程,對故事有興趣可參考「FreeTong DIY」這篇介紹。

另外曾在「為何部落格最好避免第三方外掛?」→「六、程式有問題」→「2. 程式有木馬」提醒過讀者,現在發現這篇「《姆奈》MKnight」的第一則外國人留言,就是那個被 Google 查封的著名分頁功能作者。

這個外國作者其網站當初算是最大宗的 "Blogger 分頁工具" 輸出地,現在已經被標示為「惡意軟體網站」,只能再次提醒讀者,隨意找網路上的程式安裝到自己部落格,不小心就會替自己埋未爆彈。


2. 基本功能

分頁功能的演算法還滿瑣碎的,不得不感謝前人已經造好輪子,WFU 的工作就是把交通工具美化就好。本篇採用的程式碼出自「Helplogger」,這個版本比其他分頁工具好的地方有:
  • 部落格文章沒有 500 篇的限制
  • 不需讀取整個部落格的文章來載入、速度較快
  • 標籤頁面也能執行


3. 改造功能

因已習慣「Javascript 設計模式」的撰寫模式,將原始碼修改甚多,也增加新的功能,大致如下:
  • 程式碼全部動態執行、不拖慢網頁執行速度
  • 跳頁不必重新整理頁面,採 ajax 動態載入 → 讀者可以感受一下 "光速載入" 的效果,對訪客是非常友善的閱覽體驗
  • 原版本若要讓標籤頁面也能執行分頁功能,必須手動修改 Blogger 範本各處相關程式碼,此版本由程式自動執行。
  • 刪除全域變數及不必要的程式碼




二、準備動作


1. jQuery

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」,搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style>
/* 數字分頁 */
#blog-pager{
clear:both;
margin:30px auto;
text-align:center;
padding: 7px;
}
.blog-pager {
background: none;
}
#blog-pager > span {
margin-bottom: 10px;
}
.displaypageNum a,.showpage a,.pagecurrent{
display: inline-block;
font-size: 14px;
padding: 5px 12px;
margin-right:5px;
color: #666;
background-color:#eee;
}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{
background:#359BED;
text-decoration:none;
color: #fff;
}
#blog-pager .pagecurrent{
font-weight:bold;
color: #fff;
background:#359BED;
}
.showPageOf{
display:none!important
}
#blog-pager .pages{
border:none;
}
</style>

第一行可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery,以免重複安裝。


2. CSS 樣式

以上 style 區間的 CSS 樣式除了可自行修改,原作者也提供了多種樣式,如下圖:



可參考原文網站「Helplogger」來自行置換 CSS 樣式的程式碼。而如果熟悉 CSS 的話,其實色碼自己改一改就行了。


3. 注意事項

正式安裝之前仍有兩件事項需要注意:

  • 這個工具必須讀取部落格的 feed,因此公開的部落格才能正常執行,請檢查後台 → 設定 → 其他 → 允許網誌資訊提供 → 是否為「完整」
  • 後台設定每頁顯示的文章數,必須與小工具的設定一致,請檢查後台 → 設定 → 文章和留言 → 最多顯示 → 這裡的數字請與小工具的參數吻合。



三、安裝程式碼


接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

D:紅色參數代表每頁顯示的文章數,請跟「二、準備動作」→「3. 注意事項」後台設定的數字一致。

E:紅色參數代表換頁數字按鈕要顯示的數量,若實際的頁數超過設定的數字時,會自動隱藏。

2015.1.13 新增: F 行紅色參數 "Y" 代表頁面使用動態載入,若不使用動態載入請改成 "N"。

G~J:字串可改為中文,例如 "第一頁"、"最後一頁"、"前一頁"、"下一頁"。

L:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。


存檔後即可,想先看效果請前往範例網站:




四、補充


目前在官方範本測試,執行上應該沒問題,如有問題建議先檢查前面提到的注意事項。如有其他問題,之後再以 FAQ 的形式回答補充。


更多實用工具:

56 則留言:

  1. 切換速度真的好快!!感謝分享喔!!
    不過,對於行動版範本使用自訂,似乎不能執行,應加入判斷式將其設定只在電腦版執行?

    回覆刪除
    回覆
    1. 基本上目前為止我的程式都沒有特別考慮手機的執行效果,加上 jQuery 某些語法在手機支援度不佳(例如 ajax 動態載入),所以如果遇上手機效果不好,如你所說的,用判斷式是一個不錯的解決方式。

      或許你可以裝原始版本(無動態載入),手機應該可以正常執行。

      不過後來想到,應該可以弄個參數,選擇是否動態載入~

      刪除
    2. ㄏㄏ 這個我了解(我問過太多次了= =哈哈)只是剛剛安裝後發現行動版可能需要加入判斷式。

      您所說的原始版本是指將您提供的程式碼當中的js換成您所說的pageNav-source.js這組嗎??

      刪除
    3. 哈哈~其實我的原意是安裝國外原網站的程式碼,不過你要測試 pageNav-source.js 的話,因為那個檔是公開原始碼供學術研究用,並沒有測試過執行結果就是了。

      如果你知道判斷式怎麼寫,就不必裝原始版本,而犧牲網頁版的 ajax 動態載入功能了。

      刪除
    4. 哈哈~~原來是誤會一場。不過就以上一篇"jQuery 圖片輪播外掛__camera 安裝及使用詳解"我所發問的就知道我英文程度跟語法程度還不到家= =(舉離幾百里遠)
      不過讀您的文章一段時間了,加判斷式我行的^^呵呵
      再次謝謝你喔!!目前先用判斷式!!

      刪除
    5. 不好意思,如您前面所說的"弄個參數,選擇是否動態載入"
      那是不是就可以使用另外一種判斷式,讓行動版不使用動態載入呢??
      (...........)期待^^

      刪除
    6. 看了一下程式碼,要設這個參數得改很多地方...@@"
      可能有很多需求時才會進行吧~~XD

      刪除
  2. 有些顏色的按鈕看起來真漂亮

    回覆刪除
    回覆
    1. 原作網站算是很貼心的分頁版本了~

      刪除
  3. 當初的確是Mr.J先寫出來的
    有很多當年很厲害的大大們都不寫Blogger了

    回覆刪除
    回覆
    1. 感謝你的確認,連最早寫這個故事的「《姆奈》MKnight」都不確定這件事呢~
      可惜沒跟上當初那個百花爭鳴的年代 XD

      刪除
  4. 回覆
    1. 哪裡,感謝你的介紹,才知道這段歷史~

      刪除
  5. Dream Talker 首頁原本使用 Ajax 追加卡片式文章摘要,方便觸控式螢幕使用。但後來我發現我的讀者很少人在網頁版使用觸控式螢幕,所以改裝成分頁式,算是倒退復古風吧!XD

    回覆刪除
    回覆
    1. mark 的分頁樣式變化多端,還有萬聖節版呢~~XD

      刪除
    2. 我都忘了萬聖節版,記性真差!哈哈!

      刪除
    3. 其實我也是 google 才知道...XD

      刪除
  6. 我也裝好了,預設色調剛好很符合我的版型就不改了^^

    回覆刪除
  7. 裝了之後實際測試真是超棒的
    感謝大大辛苦結晶

    回覆刪除
  8. 版主您好,不好意思又來打擾您

    我想請教我在我的部落格使用分頁後,當我跳頁至下頁時,原來另外安裝的FB按讚按鈕和Twitter按鈕即不再顯示,這是不是我安裝的按鈕和分頁語法有衝突呢?

    http://choroni-chies.blogspot.com/

    回覆刪除
    回覆
    1. 因為這個工具的跳頁使用 "動態載入", 如果你的讚按鈕跟twitter的安裝程式是用 js 執行,那麼動態載入的新頁面,是無法動態載入 js 的,那麼這兩個按鈕就無法執行。

      解決的方法有兩種途徑:

      1. 讚按鈕可參考「Facebook 讚按鈕﹍四種安裝方式深入剖析」→ 使用 IFRAME 的安裝方式。而 twitter 要自行找找看有沒有 html 或 iframe 的安裝方式了.

      2. 不採用動態載入的跳頁方式(載入速度變慢),如留言 #1 我的回答,弄個獨立的參數出來切換。如果你覺得 twitter 按鈕非常重要、必須要顯示的話,我會考慮設定這樣的參數。

      刪除
  9. 剛剛發現在切換分頁時,我的單篇文章計數器會不見(第一頁首頁不會,第二頁以上開始就會不見)請問一下這能解決嗎??謝謝

    回覆刪除
    回覆
    1. 如我在 8 樓的回覆,動態載入無法執行 js 的內容, 所以計數器不會被執行。如果一定要出現計數器,那麼只好犧牲動態載入的速度了。

      看來在 1 樓曾回覆說要動態載入弄成參數,現在得找個時間動工了~

      刪除
    2. 原來是這個原因= =不過,相較之下,動態載入的速度還是重於其他功能,不然,數字分頁似乎就變成一個樣式而已,對於網頁載入無實質上幫助

      刪除
    3. 2015.1.13 新增 F 行參數,可選擇是否執行動態載入

      刪除
    4. Wayne您好:回報一個問題!一旦取消動態載入,點到其他頁後再點"Previous"到前一頁時會出錯喔!

      刪除
    5. 我發現原來這是本來就有的問題,跟動態載入無關,也可以說原作這裡沒寫好。感謝回報~~已經將 bug 修正!!

      刪除
  10. Wayne您好:
    我是在PTT上提問有關數字分頁變成直向顯示的chingjuwu,不瞞您說我在問題中提到有爬文試了兩、三種教學方法,其中之一就是您的這篇文章。我也去過您提供的原文連結去下載其它樣式的分頁,但不管哪一種,都一樣變成直向顯示,所以我暫時把相關語法移除了,不論如何,還是非常感謝您的回覆,謝謝。

    回覆刪除
    回覆
    1. 你好,從你的敘述來看,比較像是你這個範本的 CSS 問題,跟裝那個小工具無關。如果會使用 Chrome 開發人員工具的話,是可以自行調回來的。

      刪除
  11. 謝謝您如此詳細的教學,請問我照著操作後,分頁有正常顯示,但在分頁下出現一排字"Ajax Page Navigation"我應該如何移除呢?謝謝

    回覆刪除
    回覆
    1. WFU BLOG 的版權聲明及版權圖示: http://www.wfublog.com/2013/06/wfu-blog-copyright.html

      刪除
  12. 非常非常抱歉,恕我無知不知這是版權聲明,我不會也沒能力更動,再次感謝!

    回覆刪除
  13. WFU大大您好:

    小弟從您的網站學到了很多(其實是複製貼上)
    想請問您提供的程式碼 L行
    如果直接使用您的空間是否會出現問題
    (目前測試狀況良好0.0
    附上在HTML使用的網址
    https://docs.google.com/uc?authuser=0&id=0BykclfTTti-0N2lmRUxMZ3dRbDA&export=download

    謝謝

    回覆刪除
  14. 請依照 L 行的說明進行喔,Google Drive 公告不給外連了

    回覆刪除
  15. 我跟著步驟做了 但我的blogger還是沒變化呢 ..
    是什麼問題呢? QwQ 感謝

    回覆刪除
    回覆
    1. 請見留言注意事項,請附上你的網址。

      刪除
  16. 先感謝版大的提醒,官方分享列那邊的問題,在用語法讓行動版不顯示幾個會衝突的分享按鈕搞定了。
    這邊回報下,這個新版的分頁語法的動態顯示真的挺不錯!速度很快。
    但用在行動版就會失效導致不能正常分頁,把動態顯示關閉才能正常運行。
    所以後來想想,我乾脆把這功能在行動版隱藏了,改用Blogger官方的版本。
    因為要如何在行動版關閉動態顯示,網路版開啟動態顯示,我還不會...@-@

    回覆刪除
    回覆
    1. 你好,可參考「瞭解 Blogger 動態檢視範本 + 行動版範本的特質」http://www.wfublog.com/2016/02/blogger-dynamic-views-mobile-template-feature.html →「三、行動版範本不一定能執行網頁版工具」,本站寫的工具主要為網頁版,所以除非該工具有註明特地為行動版而研發的話,才會進行測試喔~~

      "如何在行動版關閉動態顯示" → 可以在程式碼 F 行前後使用 Blogger 判斷式即可。

      但因為程式碼 B 行有「不解析字元」,另外還要移除「不解析字元」,這樣 Blogger 判斷式才能生效,這部分的概念可參考 http://www.wfublog.com/2014/04/blogger-template-escape-code-character.html →「二、避免字元被轉換的方法」

      刪除
  17. 您好,感謝您的工具,個人的網誌終於可以使用分頁。
    但亂按了一陣子,出現了一個怪現象:
    一開始首頁的分頁工具顯示無誤,點擊其它頁也可以翻頁,
    但點回「第一頁」或「1」時,
    分頁工具會消失...?
    但有時點回第一頁、分頁工具又不會消失?
    個人有停用動態載入,改了一點CSS。
    不知道是否哪裡弄錯了....?
    試了半天也不明白問題,只好冒昧請教格主。
    感謝!

    回覆刪除
    回覆
    1. 謝謝回報,在您的網站測試,某些操作順序下,的確會發生這樣的現象。
      有空會查查是哪裡的 code 有問題,修改完後會在此討論串回覆喔。

      P.S. 因為你的留言未使用 Blogger 帳號,若勾選「通知我」不是很確定之後能否收到通知。

      刪除
    2. 謝謝您,
      個人之前有想用blogger帳號留言,
      但很奇怪,選擇用「Google帳號留言」,按「發佈」後,只有閃一下,留言無法發出。
      只好選用網址和名稱回應。
      後來發現連在自己的 Blogger 也是這樣,無法回應訪客留言。
      Google 找答案,發現要在 內容設定→Cookies中
      把[*.]www.blogger.com加入允許名單?
      不知為什麼?
      因為以前好像回應沒這問題...。

      刪除
    3. 也許是瀏覽器的 cookie 內容錯誤吧,會發生這種錯誤的可能性有很多,要細究是很困難的事,
      不過我相信把 cookie 清空,重新再來應該就可以了。

      刪除
    4. 謝謝您,
      個人也不甚清楚,
      因為個人使用瀏覽器的習慣是
      每次關閉前都清空 cookie、記錄、暫存...等等。
      反正目前可以用,個人就先這麼用吧!
      (在windows 10那臺有此問題,但在 Windows 7 這臺就不會...@@)

      刪除
    5. 我修改了 L 行的連結內容,請重新上傳你的 js 連結試試看,我測試 ok 了~

      刪除
    6. 呼!剛才您的網站進不了!個人以為發生什麼事了!
      (全都顯示為 404,換瀏覽器也不行...)
      個人立刻試了新的JS,但似乎沒有效果...。
      出問題的時候,上方的網址會變得很怪,
      像是:
      首頁網址/search?updated-max=2017-11-19T00%3A00%3A00%2B08%3A00&max-results=10#PageNo=/
      不只是分頁效果無法出現,連原先新舊文章的按鈕也不見了...。
      如果把後面那串刪除就又能正常顯示。
      個人是有點好奇為什麼有這問題?,
      因為若別人用都沒事,那可能就是個人的網誌有什麼問題吧...。
      (會是個人網誌放了什麼影響到嗎?真是抱歉!)
      若實在不行,個人就放棄分頁也沒關係的。
      因為覺得有分類已經很夠用了。
      很感謝您還幫忙找問題。
      謝謝您!

      刪除
    7. 這幾天 Blogger 伺服器不太穩,有時網站會進不來~~
      我看你的網站已經換新的 js,我測試了,沒什麼問題喔,原本的狀況已經消失了
      也許你看到的是快取畫面,瀏覽器可以開無痕看看,會比較準

      刪除
    8. 謝謝您的回應。
      個人試了無痕仍然不行。
      但想說您說可以,
      個人就又在 Edge 上試,卻是OK的。
      後來看到 Chrome 網址列右方有個小圖,說「無法為此網頁設定Cookie」
      在設置中將網址加到允許就可以了...@@。
      不知之前分頁不能顯示會不會也和這有關?
      (之前登入狀態不顯示的問題也是...)
      是不是該把 Chrome 某些設置改掉呢...。
      (目前的設定會封鎖所有第三方的cookie)
      謝謝!

      刪除
    9. 「無法為此網頁設定Cookie」這狀況還滿特殊的,我是沒遇過,找到這篇供參考:http://sky940811.pixnet.net/blog/post/245007118

      總之能正常使用 cookie 就好了,現在的網頁若封鎖 cookie 的話,很多功能是無法用的。

      BTW,本篇的分頁功能程式碼不完全是我寫的,是從別人的 code 改的,可參考內文,一定留有不完善的地方,所以您的狀況回報剛好可以修正一些錯誤,tks~

      刪除
    10. 真的很感謝您!
      不過,後來多按幾次,又開始有一樣的問題...。
      (按到其它頁→第一頁→其它頁→第一頁...,就是第一頁會有問題)
      一旦開始有問題,之後再按就都不太能成功。
      允許了第三方cookie也一樣。
      (右上方有個小圖:這個網頁正在嘗試載入未經驗證的指令碼?網誌的第一篇文章會不見)
      用 Edge 比較好,目前還沒問題的樣子...。
      可能個人的哪個設定有問題吧...。
      不過,一般人是比較不會這樣按,所以也還好。
      不太好意思一再麻煩您,因為也不太明白問題所在...。
      很謝謝您!

      刪除
    11. 既然 Edge 沒問題,我測試也沒問題,那麼程式是沒有問題的。

      你說的沒有錯,一般人不會這樣按,所以是可以忽略這些情況。

      然而從你的敘述來看,感覺問題在於你使用的瀏覽器,一般來說 Chrome 不會出現「無法為此網頁設定Cookie」等狀況,我是沒遇過。所以你的 chrome 或許移除乾淨、刪除所有瀏覽資料,然後重新安裝,看會不會比較正常。

      刪除
  18. 謝謝您!
    其實,Edge 偶爾也會如此,但頻率比較低...。
    不過,個人是有點不太想試了...,
    因為後來覺得好像沒分頁也不是很難用...。
    有分類真的足夠了,因為沒人知道第X頁有啥文章。
    不如搜尋和分類更實用。
    SO,也許過陣子會把分頁代碼清掉吧(清掉就可以移除了吧?)...。
    倒是想再看看文章加密隱藏的問題。
    過幾天來試試。
    謝謝您的幫助!

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP