關於 web service, unity, blogger 等軟體工程筆記

Blogger 使用 jQuery jScroll 實作無限捲頁,自動載入更多文章 (Infinite scrolling)

Edit icon 沒有留言
無限捲頁

無限捲頁 (infinite scrolling),或是被稱為其他名字,自動換頁 (auto pagination),無限滾動 (endless scrolling),無限頁面(endless pages) ,或是懶加載 (lazy loading) 等等…。主要目的是當使用者閱讀到內容結尾時,能夠自動加載後續的分頁內容,而不是使用者還需要點選連結操作,使得行動裝置用戶能夠享受更好的閱讀體驗。

這樣的載入作法,主要得依賴瀏覽器的 javascript 來實作,偵測瀏覽器是否捲軸已經滾動到頁面底,然後透過 adjx 在背景加載後續的頁面內容後,再顯示在當前網頁內容上。

之前忘記看到哪個網站使用這樣的技術,覺得十分有用處,故想拿來取代原先使用分頁的系統方式。原本想要重頭基於 jQuery 這套 javascript 函數庫開始寫,但在後續尋找資料的過程中,找到已經有前人已經實作,並且是開放程式碼放在 cdnjs 這支援資料快取的伺服器上。因此花點時間將無限捲頁實作在目前的部落格上,並且寫下這實作筆記。

使用 jScroll

jScroll 是基於 jQuery 實作無限捲頁的函數 庫,只要短短幾行程式碼,便可以完成無限捲頁功能,且可以使用 CDNJS 上的資源來引用,不需要找網路空間來放置該函數庫程式碼 (*.js)。

它的範例十分簡單,首先需要先引用這兩個 javascript 函數庫(如果已經有 jQuery 則不用):

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.9/jquery.jscroll.min.js'></script>

以下針對使用 Blogger 內建主題 Contempo,所調整實作的自動加載程式碼範例(必須告訴 jQuery 哪些內容是要加入到當前頁面中,從哪裡可以找到更多文章的連結):

<script type='text/javascript'>
   $('#page_body').jscroll({
      contentSelector: '#page_body div.widget',
      nextSelector: 'a.blog-pager-older-link',
      callback: function(){
         $('div.blog-pager').remove();
      }
   });
</script>
  • Line 2:針對哪個容器啟用 jscroll
  • Line 3:加載下一頁後,哪些元素要被加入到主容器,注意分頁元素也必須被放進來,可以使用逗號 ‘,’ 進行多條件選擇元素
  • Line 4:下一頁連結的選擇
  • Line 6:完成加載後,嘗試把分頁元素整個移除
注意:目前範例是針對 Blogger 內建主題 Contempo,其他主題可能需要進行調整修改

調整載入顯示

預設載入顯示的訊息是文字 Loading,若要調整載入訊息,可以從 jScroll 說明中得知,加入 loadingHtml 設定。

例如有使用到 Boostrap 以及 FontAwesome 框架,可以修改上節範例,使用置中的載入圖示:

<script type='text/javascript'>
   $('#page_body').jscroll({
      loadingHtml: "<div class='row text-center'><i class='fa fa-spinner fa-spin'></i></div>",
      contentSelector: '#page_body div.widget',
      nextSelector: 'a.blog-pager-older-link',
      callback: function(){
         $('div.blog-pager').remove();
      }
   });
</script>

或是利用線上資源 loading.io 建置喜歡的載入圖示,上傳到 Blogger 相簿後取得該圖片連結,修改 loadingHtml:

loadingHtml: "<div style='text-align: center;'><img src='YOUR_LOADER_IMAGE_URL'/></div>",

更多 jScroll 可調整的參數以及功能,請參考其 Github 連結

快速安裝 jScroll

原則上,如果熟悉 HTML 並瞭解如何直接修改範本,jScroll 那兩段程式碼放入到範本適當的位置即可。

如果不太熟悉,可以採用調整版面配置的方法來安裝,以內建主題 Contempo 為例,且該範本尚未被調整過,在側欄 (底部) 新增小工具:

版面配置,側欄 (底部),新增小工具

版面配置,側欄 (底部),新增小工具

選擇 HTML/JavaScript:

新增小工具 HTML/JavaScript

新增小工具 HTML/JavaScript

將上節的兩段程式碼貼上,並且按下儲存就完成了:

小工具貼上程式碼並按下儲存

小工具貼上程式碼並按下儲存

使用 requireJS 安裝 jScroll

requireJS 是一套管理 javascript 函數庫載入的函數數,通常用來加速網頁載入速度以及維護良好的程式品質,使用 requireJS 載入也相當簡單,首先先確保引用 requireJS:

<script src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js'></script>

設定 requireJS 設定檔,注意不需要使用 shim 來設定依賴:

<script type='text/javascript'>
requirejs.config({
   paths: {
      'jquery': ['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min'],
      'jscroll': ['https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.9/jquery.jscroll.min']
   },
});
</script>

然後修改一開始的範例,呼叫 require 來進行 jScroll 初始化:

<script type='text/javascript'>
require(['jquery', 'jscroll'], function($){
   $('#page_body').jscroll({
      loadingHtml: "<div class='row text-center'><i class='fa fa-spinner fa-spin'></i></div>",
      contentSelector: '#page_body div.widget',
      nextSelector: 'a.blog-pager-older-link',
      callback: function(){
         $('div.blog-pager').remove();
      }
   });
});
</script>

進一步的討論

  • callback 可能需要客製化的調整

    嘗試在個人部落格套用此無限捲頁功能,但由於原先版型還需要一些 javascript 來調整每一篇文章顯示的內容(文章介紹以及時間顯示格式),因此得在 callback 呼叫該些函數,使得加載的頁面也能夠套用到版型調整的功能

  • 會不會影響 SEO (search engine optimization, 搜尋引擎最佳化)?

    原則上不會,由於有手動提交網站地圖,Google crawler 會很聰明地找到所有文章,並且建立索引

  • 需要網誌存檔 (archive) 的搭配

    改成無限捲頁的機制,捨棄原先個人部落格的分頁系統,勢必得提供網誌存檔,提供文章列表的頁面,好讓使用者能夠快速看到所有文章,而不是一直捲頁面……。

沒有留言: