Blogger 無限捲頁功能 (infinite scroll)

6月 27, 2011 程式寫作 , Blogger , JavaScript , Programming/JavaScript 23 Comments Edit Copy Download 3032 Characters, 7 Images

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>

1. loadingImg：讀取時顯示的圖片。預設是用Infinite Scroll提供的讀取動畫，我傳到了自己的空間去：
   
2. 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小工具吧。

不過經過這一課，又學到一些東西，感覺還是挺令人開心的就是。