Blogger 無限捲頁功能 (infinite scroll)
Google的Blog平台「Blogger」一直都有持續改進的消息，最近電腦玩物介紹了其中功能，其中一項是眾所期待的「無限捲頁」（或稱為無限捲動、自動換頁）。不過此功能目前尚未正式安裝，我看了好多Blogger也都沒有出現。所以我想就自己手動寫一個，並在此分享給有興趣的人來安裝。
無限捲頁功能介紹
傳統網頁中，使用者讀到網頁最下方時，必須要自己按換頁連結。在Blogger中就是「較舊的文章」。對使用者來說，每次都要按連結以重新讀取文章，還要載入文章之外的資料，往往會打擾使用者的閱讀節奏。
如果有無限捲頁的話，當使用者讀到網頁最下方時，程式會自動載入下一頁的網頁中顯示文章的內容，並貼到現在閱讀文章的最後面，讓使用者感覺就像是文章延長了一樣。
Google圖片搜尋也有應用到無限捲頁，這種使用經驗讓許多人稱讚不已。
使用者也可以自行安裝Auto Pager套件來擁有無限捲頁的功能。Firefox跟Chrome都可以使用，詳情請看電腦玩物的介紹。不過Auto Pager的功能不一定能配合的上Blogger，也不是每個使用者都有裝Auto Pager。那麼自己動手改造，讓Blogger具備無限捲頁功能，這樣也是不錯的作法。
由於Blogger並沒有提供大量換頁的功能，使用者只能一直按「較舊的文章」，因此也是相當適合使用無限捲頁功能。
Blogger官方將無限捲頁稱為「Auto Pagination」（自動換頁）。為了避免混淆，這邊我是用「Infinite Scroll」（無限捲頁）來稱之。一方面也是因為我是用jQuery的Infinite Scroll插件來建構此功能的緣故。不知道何時Blogger才會正式安裝此功能，在這之前，你也可以像我一樣裝個無限捲頁來玩玩。
Blogger文章數量與設定不合的問題
Blogger可以在後臺中設定主頁最多顯示的文章數量，注意，是「最多」，而不是「固定」顯示。
因為Blogger有單頁最多顯示1MB的限制，如果當文章的內容過多的時候，首頁可能會因為這個限制而顯示不出設定中的文章數量。「布丁布丁吃什麼？」的首頁時常只會顯示一篇文章，可能就是這個原因。
不少Blogger的使用者都有提出這個問題，官方的解決方案之一是使用「繼續閱讀」功能，降低每一篇文章的顯示字數，就可以在單頁中顯示較多文章量。不過我自己用布丁式自動摘要功能，懶得每次都要插入「繼續閱讀」，所以這方案並不適合我。
另一個方案是官方推薦自己的「Auto Pagination」（自動換頁）功能，讓人閱讀到最後時自動載入下一頁的內容，就不會有單頁顯示文章數量過少的問題。不過至今「Auto Pagination」還是沒有實裝，所以我乾脆自己寫一個吧！
安裝無限捲頁
進入Blogger的管理介面，進入「設計」的「網頁元素」，在頁尾的地方新增小工具。
選擇其中的HTML/JavaScript。
標題留空，內容貼上以下無限捲頁的程式碼：
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>google.load("jquery","1.2.6");</script>
<script src='https://sites.google.com/site/puddingchen35/blogger-infinite-scroll/jquery.blogger.infinitescroll.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/puddingchen35/blogger-infinite-scroll/blogger-infinite-scroll-setup.js' type='text/javascript'></script>
<script type="text/javascript">
setup_blogger_infinite_scroll({
loadingImg: "https://sites.google.com/site/puddingchen35/blogger-infinite-scroll/infinite-scroll-loading.gif",
loadingText: "<em>下一頁讀取中……</em>"
});
</script>
儲存設定，這樣就完成了。
設定無限捲頁
在無限捲頁的程式碼中，可以設定兩個地方，位於以下範圍中：
<script type="text/javascript">
setup_blogger_infinite_scroll({
loadingImg: "https://sites.google.com/site/puddingchen35/blogger-infinite-scroll/infinite-scroll-loading.gif",
loadingText: "<em>下一頁讀取中……</em>"
});
</script>
- loadingImg：讀取時顯示的圖片。預設是用Infinite Scroll提供的讀取動畫，我傳到了自己的空間去：
- loadingText：讀取時顯示的文字。預設是「<em>下一頁讀取中……</em>」，可以使用HTML語法。
這個功能是改自jQuery的Infinite Scroll插件，雖然名字跟大部分功能都是一樣的，但是為了適應Blogger的版型，我修改了它原本自動判斷換頁連結的演算法，改成每一次都是去找尋「較舊的文章」的連結來讀取。修改後的Infinite Scroll插件檔案可以由此下載。
比較Endless Scroll跟Infinite Scroll
題外話，其實我在論文系統當中也用了無限捲頁的技巧。上圖中下面的標註列表就是用無限捲頁來實作，一開始JavaScript只會讀取少量標註，但隨著使用者往下捲動，JavaScript會讀取更多標註，直到沒有其他標註為止。
當時用的是jQuery的Endless Scroll插件，它比較適用於建構新功能時使用。Infinite Scroll則比較偏向修改既有功能，主要是以找尋下一頁連結而插入新文章的方式來實作無限捲頁。
結語
儘管一開始看到電腦玩物的介紹時，我還蠻期待Blogger趕快推出無限捲頁的功能，但事後想想，「布丁布丁吃什麼？」版面被我改了這麼多，Blogger要加入功能，恐怕也沒這麼容易。既然如此，那就自己改吧。一直以來我都是這樣走過來的。
做到一半的時候，我也有想過要不要將它設計成「小工具」（Gadget for Blogger）。研究了半天，才發現原來第三方的小工具是用iframe來實作，這樣就不能像無限捲頁一樣跟Blog內容有所互動，只能放棄這個途徑，乖乖插入HTML/JavaScript小工具吧。
不過經過這一課，又學到一些東西，感覺還是挺令人開心的就是。
親愛的站長~
回覆刪除可否請教一下~
這個用上去之後網站一點改變都沒有耶
請問是失效了?
還是我的網站不適合呢?
謝謝您的幫助...感激!!
To 1樓匿名，
回覆刪除可否讓我看一下你的網站，看看它加上去之後變成什麼樣子？問題出在哪裡？
可敬的站長
回覆刪除首先真的很謝謝你願意回覆我的問題
小弟的站網址如下:
http://www.mjfaith.com/
我是開HTML小工具
完全複製貴站的語法
貼上去
之後回到首頁
是完全沒有差別
像是不曾加入過語法這樣
真的很希望能把站加入站長的這個功能
先感謝站長幫忙了
感激不盡
謝謝!謝謝!!
不好意思～站長先生
回覆刪除我也想要問一下該如何加入這個功能
不知道是否是因為版型的問題
我加入這個語法到網頁最下面也是沒有任何改變
也想麻煩您幫我看看>"<
http://bowtoland.blogspot.tw/
Sarah.
對了~站長大大
回覆刪除貴網站的圖片即時顯示外掛也是依樣喔
放上去之後也是沒有任何改變^^
站長先生！
回覆刪除我今天使用部落格的時候突然發現我可以無限捲頁了！感激你！
位蛇ㄇ我還是不行...可以請問你是怎ㄇ用的嗎？
回覆刪除謝謝
站長大大
回覆刪除我找到BUG了
是網址的設定
如果是用BLOGGER的原始網址你ㄉ程式碼是可以用ㄉ
但是個人設定網址ㄉ話
程式碼是無效的
圖片及時ㄉ也是
請問是否能修改程式碼ㄉ地方可以用的呢?
可以了耶
回覆刪除站長大大
你真是帥
感謝你啦^^
我很感謝
站長老大
回覆刪除我想請教您一ㄍ問題
不知道這次ㄉ事件是怎ㄇ更改ㄉ
因為我剛自己安裝JS檔
發現也是有BLOGGER網址可以用~自己ㄉ網域名稱就成是無效ㄉ問題
可以請您告訴我怎ㄇ解決的嗎?
謝謝您
To 網站是http://www.mjfaith.com/的匿名：
回覆刪除因為你用了顯示頁數的JavaScript，讓原本的「下一頁」被動過。無限捲頁要找的是class="blog-pager-older-link"的下一頁，可是他現在找不到，所以就無法讀取。
請自行把你現在的「下一頁」加上class="blog-pager-older-link"吧。
To 5樓匿名：
回覆刪除關於Blogger 圖片延緩載入功能，請移駕到該篇討論：
http://pulipuli.blogspot.tw/2011/06/blogger-image-lazy-load.html
我試著提出一個解決方案，請參考看看，有問題請在該篇底下討論。
您好，我試用了您的infinity scroll，發現幾個狀況不甚理想：
回覆刪除http://mixflavors.blogspot.tw/
例如，我將文章放置了facebook的like與comment外掛，可是infinity叫出來的文章卻不會顯示，我想不到該從哪裡下手去改？煩請指教與解惑，謝謝！
To Chodaict Ke:
回覆刪除沒錯，他的確無法動態載入facebook這種外掛功能。
要改的話要從載入的方式著手。
預設是會從下一頁擷取純文字，轉換成HTML的element，貼到後面的地方。
後面這個貼append的動作，不會讓facebook這種外掛順利進行。
我猜可以先把非外掛的部分貼到後面，然後再另外執行facebook外掛，讓它貼到非外掛部分中的外掛功能。
講的很抽象，我也沒把握是否可以這樣做。
目前這一篇也不會去實作上述的功能。
因為一邊捲動一邊載入大量facebook資料，會讓網頁變得很慢。
我寧願只是單純的文章能捲動就好，要看留言的話，就進入文章看完整留言吧。
請自行研究看看。
作者已經移除這則留言。
回覆刪除布丁：
回覆刪除後來我解決了，將fb的plugin都改成以iframe的方式嵌入而不要使用js寫入，並且把它們的位置放在《data:post.body》內，讓外掛被當成文章的一份子XD
謝謝您的回覆！
To Chodaict Ke:
回覆刪除聰明，給你一個讚！
只想顯示讀取圖案，不想顯示文字該如何修改啊?
回覆刪除把loadingText: "下一頁讀取中……"拿掉沒用@@
To Charisma Lin
回覆刪除改成
loadingText: ""
這樣就可以了
可以請問一下 為何無限捲頁跟back to top的功能無法同時顯示呢?
回覆刪除back to top是參閱http://www.wfublog.com/2013/08/go-top-button-ux.html
To Z.s:
回覆刪除我猜是因為重複載入兩次jQuery吧
把我程式碼中載入jQuery的部份拿掉看看
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>google.load("jquery","1.2.6");</script>
你好!!站長,
回覆刪除最近我使用了這個無限捲頁的工具，不過我發現有時候他會不斷的重複載入第一頁的內容，有時候又是正常運作。不知可不可以請站長幫我看一下問題在哪嗎?感謝!!:)
http://evansmemo.blogspot.tw/
Evan
To Evan:
回覆刪除這問題可大了，我短期內恐怕無法解決。