2014年11月1日 星期六

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

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

Wayne Fu 0 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 的形式回答補充。


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP