:::

Blogger 無限捲頁功能 (infinite scroll)

17510352447 首頁圖

Google的Blog平台「Blogger」一直都有持續改進的消息,最近電腦玩物介紹了其中功能,其中一項是眾所期待的「無限捲頁」(或稱為無限捲動、自動換頁)。不過此功能目前尚未正式安裝,我看了好多Blogger也都沒有出現。所以我想就自己手動寫一個,並在此分享給有興趣的人來安裝。


無限捲頁功能介紹

傳統網頁中,使用者讀到網頁最下方時,必須要自己按換頁連結。在Blogger中就是「較舊的文章」。對使用者來說,每次都要按連結以重新讀取文章,還要載入文章之外的資料,往往會打擾使用者的閱讀節奏。

如果有無限捲頁的話,當使用者讀到網頁最下方時,程式會自動載入下一頁的網頁中顯示文章的內容,並貼到現在閱讀文章的最後面,讓使用者感覺就像是文章延長了一樣。

image

Google圖片搜尋也有應用到無限捲頁,這種使用經驗讓許多人稱讚不已。

使用者也可以自行安裝Auto Pager套件來擁有無限捲頁的功能。FirefoxChrome都可以使用,詳情請看電腦玩物的介紹。不過Auto Pager的功能不一定能配合的上Blogger,也不是每個使用者都有裝Auto Pager。那麼自己動手改造,讓Blogger具備無限捲頁功能,這樣也是不錯的作法。

由於Blogger並沒有提供大量換頁的功能,使用者只能一直按「較舊的文章」,因此也是相當適合使用無限捲頁功能。

Blogger官方將無限捲頁稱為「Auto Pagination」(自動換頁)。為了避免混淆,這邊我是用「Infinite Scroll」(無限捲頁)來稱之。一方面也是因為我是用jQuery的Infinite Scroll插件來建構此功能的緣故。不知道何時Blogger才會正式安裝此功能,在這之前,你也可以像我一樣裝個無限捲頁來玩玩。


Blogger文章數量與設定不合的問題

2011-06-25_231655 文章數量設定

Blogger可以在後臺中設定主頁最多顯示的文章數量,注意,是「最多」,而不是「固定」顯示。

因為Blogger有單頁最多顯示1MB的限制,如果當文章的內容過多的時候,首頁可能會因為這個限制而顯示不出設定中的文章數量。「布丁布丁吃什麼?」的首頁時常只會顯示一篇文章,可能就是這個原因。

不少Blogger的使用者都有提出這個問題,官方的解決方案之一是使用「繼續閱讀」功能,降低每一篇文章的顯示字數,就可以在單頁中顯示較多文章量。不過我自己用布丁式自動摘要功能,懶得每次都要插入「繼續閱讀」,所以這方案並不適合我。

另一個方案是官方推薦自己的「Auto Pagination」(自動換頁)功能,讓人閱讀到最後時自動載入下一頁的內容,就不會有單頁顯示文章數量過少的問題。不過至今「Auto Pagination」還是沒有實裝,所以我乾脆自己寫一個吧!


安裝無限捲頁

2011-06-25_233326 設計 網頁元素

進入Blogger的管理介面,進入「設計」的「網頁元素」,在頁尾的地方新增小工具。

2011-06-25_233246 新增JavaScript

選擇其中的HTML/JavaScript。

image

標題留空,內容貼上以下無限捲頁的程式碼:

<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

annotation_tool_original

題外話,其實我在論文系統當中也用了無限捲頁的技巧。上圖中下面的標註列表就是用無限捲頁來實作,一開始JavaScript只會讀取少量標註,但隨著使用者往下捲動,JavaScript會讀取更多標註,直到沒有其他標註為止。

當時用的是jQuery的Endless Scroll插件,它比較適用於建構新功能時使用。Infinite Scroll則比較偏向修改既有功能,主要是以找尋下一頁連結而插入新文章的方式來實作無限捲頁。


結語

儘管一開始看到電腦玩物的介紹時,我還蠻期待Blogger趕快推出無限捲頁的功能,但事後想想,「布丁布丁吃什麼?」版面被我改了這麼多,Blogger要加入功能,恐怕也沒這麼容易。既然如此,那就自己改吧。一直以來我都是這樣走過來的。

做到一半的時候,我也有想過要不要將它設計成「小工具」(Gadget for Blogger)。研究了半天,才發現原來第三方的小工具是用iframe來實作,這樣就不能像無限捲頁一樣跟Blog內容有所互動,只能放棄這個途徑,乖乖插入HTML/JavaScript小工具吧。

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

總共23 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 親愛的站長~
    可否請教一下~

    這個用上去之後網站一點改變都沒有耶
    請問是失效了?
    還是我的網站不適合呢?

    謝謝您的幫助...感激!!

    回覆刪除
  2. To 1樓匿名,

    可否讓我看一下你的網站,看看它加上去之後變成什麼樣子?問題出在哪裡?

    回覆刪除
  3. 可敬的站長

    首先真的很謝謝你願意回覆我的問題

    小弟的站網址如下:
    http://www.mjfaith.com/

    我是開HTML小工具
    完全複製貴站的語法
    貼上去

    之後回到首頁
    是完全沒有差別
    像是不曾加入過語法這樣

    真的很希望能把站加入站長的這個功能

    先感謝站長幫忙了

    感激不盡
    謝謝!謝謝!!

    回覆刪除
  4. 不好意思~站長先生

    我也想要問一下該如何加入這個功能
    不知道是否是因為版型的問題
    我加入這個語法到網頁最下面也是沒有任何改變
    也想麻煩您幫我看看>"<

    http://bowtoland.blogspot.tw/

    Sarah.

    回覆刪除
  5. 對了~站長大大
    貴網站的圖片即時顯示外掛也是依樣喔
    放上去之後也是沒有任何改變^^

    回覆刪除
  6. 站長先生!

    我今天使用部落格的時候突然發現我可以無限捲頁了!感激你!

    回覆刪除
  7. 位蛇ㄇ我還是不行...可以請問你是怎ㄇ用的嗎?

    謝謝

    回覆刪除
  8. 站長大大
    我找到BUG了
    是網址的設定
    如果是用BLOGGER的原始網址你ㄉ程式碼是可以用ㄉ

    但是個人設定網址ㄉ話
    程式碼是無效的
    圖片及時ㄉ也是

    請問是否能修改程式碼ㄉ地方可以用的呢?

    回覆刪除
  9. 可以了耶
    站長大大

    你真是帥

    感謝你啦^^

    我很感謝

    回覆刪除
  10. 站長老大
    我想請教您一ㄍ問題

    不知道這次ㄉ事件是怎ㄇ更改ㄉ
    因為我剛自己安裝JS檔
    發現也是有BLOGGER網址可以用~自己ㄉ網域名稱就成是無效ㄉ問題

    可以請您告訴我怎ㄇ解決的嗎?

    謝謝您

    回覆刪除
  11. To 網站是http://www.mjfaith.com/的匿名:

    因為你用了顯示頁數的JavaScript,讓原本的「下一頁」被動過。無限捲頁要找的是class="blog-pager-older-link"的下一頁,可是他現在找不到,所以就無法讀取。

    請自行把你現在的「下一頁」加上class="blog-pager-older-link"吧。

    回覆刪除
  12. To 5樓匿名:

    關於Blogger 圖片延緩載入功能,請移駕到該篇討論:
    http://pulipuli.blogspot.tw/2011/06/blogger-image-lazy-load.html

    我試著提出一個解決方案,請參考看看,有問題請在該篇底下討論。

    回覆刪除
  13. 您好,我試用了您的infinity scroll,發現幾個狀況不甚理想:
    http://mixflavors.blogspot.tw/
    例如,我將文章放置了facebook的like與comment外掛,可是infinity叫出來的文章卻不會顯示,我想不到該從哪裡下手去改?煩請指教與解惑,謝謝!

    回覆刪除
  14. To Chodaict Ke:

    沒錯,他的確無法動態載入facebook這種外掛功能。
    要改的話要從載入的方式著手。

    預設是會從下一頁擷取純文字,轉換成HTML的element,貼到後面的地方。
    後面這個貼append的動作,不會讓facebook這種外掛順利進行。
    我猜可以先把非外掛的部分貼到後面,然後再另外執行facebook外掛,讓它貼到非外掛部分中的外掛功能。

    講的很抽象,我也沒把握是否可以這樣做。
    目前這一篇也不會去實作上述的功能。

    因為一邊捲動一邊載入大量facebook資料,會讓網頁變得很慢。
    我寧願只是單純的文章能捲動就好,要看留言的話,就進入文章看完整留言吧。

    請自行研究看看。

    回覆刪除
  15. 作者已經移除這則留言。

    回覆刪除
  16. 布丁:
    後來我解決了,將fb的plugin都改成以iframe的方式嵌入而不要使用js寫入,並且把它們的位置放在《data:post.body》內,讓外掛被當成文章的一份子XD
    謝謝您的回覆!

    回覆刪除
  17. To Chodaict Ke:

    聰明,給你一個讚!

    回覆刪除
  18. 只想顯示讀取圖案,不想顯示文字該如何修改啊?

    把loadingText: "下一頁讀取中……"拿掉沒用@@

    回覆刪除
  19. To Charisma Lin

    改成

    loadingText: ""

    這樣就可以了

    回覆刪除
  20. 可以請問一下 為何無限捲頁跟back to top的功能無法同時顯示呢?
    back to top是參閱http://www.wfublog.com/2013/08/go-top-button-ux.html

    回覆刪除
  21. 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>

    回覆刪除
  22. 你好!!站長,
    最近我使用了這個無限捲頁的工具,不過我發現有時候他會不斷的重複載入第一頁的內容,有時候又是正常運作。不知可不可以請站長幫我看一下問題在哪嗎?感謝!!:)
    http://evansmemo.blogspot.tw/
    Evan

    回覆刪除
  23. To Evan:

    這問題可大了,我短期內恐怕無法解決。

    回覆刪除