思元的開發筆記

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

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

王思元 6:20 下午 網站 , Blogger , JavaScript 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) 的搭配

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

沒有留言: