2014年11月10日

[小工具]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 的形式回答補充。


更多實用工具:

39 則留言:

  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 公告不給外連了

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。