2015年12月22日 星期二

在 Google Blogger 加入可控式「繼續閱讀(Read More)」功能

「繼續閱讀」之功能，在 Blogger 中又叫作 Jump Break ，其主要原理是讓 Blogger 不載入文章或是隱藏文章(只顯示摘要或標題)，達到頁面載入速度加快及提升閱讀便利性。大致又區分成兩種方式來達成：

  1. Direct Link(超連結)：真正的「不載入」文章，並以 Read More 將讀者引導至單篇文章的超連結頁面，有效大幅提升 Blogger 載入速度。但缺點是從讀者角度閱讀時，點選 Read More 會跳至超連結而整頁刷新。
  2. Collapsible(折疊收合)：全部文章載入後「隱藏」起來，會稍微是升 Blogger 載入速度，點選 Read More 以「展開/收合」的方式提供閱讀，還可以加入動畫效果(滑動、淡入淡出)。雖然犧牲網頁載入速度，但從讀者角度，這種閱讀方式較為舒適。

本 Blogger 選用 Collapsible 的方式，過程參考「[BLOGGER]繼續閱讀懶人加強版 最新版本 v2.2.1(2009.5.8)」之文章，並實作成功。

於本站之用法：在文章(撰寫或 HTML 下都可以)中加入特殊字串則會在該處設定「Read More」，末設定則只顯示前 3 行，其餘隱藏，設定的符號為(注意大小寫)：

##ReadMore##


後續介紹本站之設定方式：

Step1.
Blogger 「設計」→「範本」→「編輯HTML」→
找到 <head>...</head>，於 <head> 後方加入下碼：
(橙色字部份為建議修改及試玩的部份)


Step2.
參考文章「[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]參數設定說明」進行參數微調，配合自己的需求。

Step3.
完成設定後，於文章內文中加入特殊標記做為繼續閱讀的分隔線，後面內容會自動收合。

Reference:



於
標籤：