官方版「繼續閱讀」(Jump Break Link)

才 Po 完一個新功能，沒多久又來一個，這次是幾乎大部分人都會用的「繼續閱讀」功能（官方叫它 Jump Break）。沒錯，這又是 Blogger 獨漏的功能之一，其實我在一開始玩 Blog 沒多久，就做了類似的 Hack：「首頁長篇文章的收合」，顧名思義，主要是做在首頁的一個修改，有些文章篇幅太大，一旦讀者連到首頁，多篇文章過多的文字和大圖擠在首頁，在閱讀和載入時都很花時間，於是很多 Blog 系統提供了類似文章摘要的設計，在首頁只顯示一部分內文，如果讀者有興趣，再點「繼續閱讀」的連結跳轉該文章的完整連結。因為當時 Blogger 不支援，所以大部分做在 Blogger 的 Hack，顯示在首頁的並不是真正的「文章摘要」，而是仍載入全文、透過 CSS 的手法隱藏掉部份段落，讓版面上比較精簡，讀取上稍稍變快（因為沒顯示出來，但還是要全載入），所以我從來不叫這類 Hack 為首頁摘要或是繼續閱讀，因為原理上是透過「隱藏」的手段顯示部份內文。也因為這樣，我之前的 Hack 才能夠提供兩種模式：一種是動態收合 (id=detail，點了連結馬上在首頁展開)，另一種才是繼續閱讀 (id=fullpost)、點連結跳轉完整文章。這次官方提供的「繼續閱讀」功能，作法是在想分段的地方插入程式碼，當首頁讀到這個標記，後半段內文就都直接「不載入」，這和我 Hack 的 CSS 收合隱藏作法大不相同（雖然畫面上看起來很像），但這才是正確、有效率的「繼續閱讀」，也是一般 Hack 所做不到的。

此功能一出，網路上的教學和介紹文章也蜂擁而至，不過我第一次要試用，卻沒有人家講的那麼簡單。首先，人家說有個「插入 Jump/Break 指令」的圖示在編輯工具列，我卻看不到！除非登入「Blogger Draft」，不然那個功能圖示也出不來。原來是要先到後台的「設定」、「基本」最下面，「選取文章編輯器」時切換到「新版文章編輯器」，這樣才看得到那個圖示（新版編輯器的功能說明在此）。有了那個圖示，代表你的編輯器可以直接插入用來做「繼續閱讀」的程式碼啦！

要先套用「新版文章編輯器」

編輯器才會有插入「繼續閱讀」標籤的工具圖示

受限於文章發表的介面，Blogger 沒辦法像部份 BSP 提供的辦法，將文章發表分成「摘要」和「內文」兩個區塊來寫作（摘要就是只顯示在首頁的部份，摘要+內文是完整文章），作法是發表新文章時，透過插入 Jump 指令的圖示，或是編輯文章原始碼，手動加入摘要和內文的分隔語法也行（語法：<!-- more -->），就可以在文章內識別出摘要的段落了。如果覺得「閱讀更多>>」這個字樣太醜，也可以到「版面配置」、「網頁元素」的設定頁面，編輯「網誌文章」的屬性，這個字樣內容就可以修改了。

插入 Jump Break Link 以後的編輯畫面，會有一條明顯的分隔線

如果不想用預設的「閱讀更多>>」字樣，也可以自己修改

問題又來啦！有了「插入跳行」圖示，或你手動插入分隔語法，甚至也改了「閱讀更多」的字樣，怎麼 Po 了文，還是只有「摘要」出現在首頁，繼續閱讀的連結根本沒出現？老問題，如果你和我一樣 Hack 過程式碼，因為原始碼被動過，Blogger 可不敢貿然動你的 Code，所以這個新增功能所需的代碼並不會被插入樣板，這要靠自己手動補進去啦！檢查一下樣板原始碼（展開小裝置範本），先找到顯示內文的主要標籤（這句應該只有一個地方，如果你有用過其他 Hack，請視自己的狀況斟酌修改）：

<data:post.body/>

在內文的後面插入顯示「閱讀更多」字樣標籤的程式碼：

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
  </div>
</b:if>

上面這段程式碼的意思是，如果這篇文章內有 Jump Link （也就是繼續閱讀的程式碼標記），於是在文章的最後放上該文章的連結網址、套用 CSS class=jump-link、顯示文字變數 post.jumpText （就是上面提到可以改的「閱讀更多>>」字樣）。也因此如果對這個 Jump Link 的 CSS 樣式不滿意，也可以在自己的樣板裡（</style> 標籤前面），加入這個連結的樣式定義，像我用的範例類似是這樣（靠右、有框）：

/* Style for Jump-Link */
.jump-link {
  float: right;
  border: 1px solid #333333;
  background: #222222;
  font-size: 8pt;
  margin: 0;
  padding: 2px 10px 2px 10px;
}

以上可以依照自己的需求樣式去修改（如果要插入圖示，也可以直接在字樣標籤的程式碼裡 <data:post.jumpText/> 前後插入圖示連結）。

到此我們有了新版編輯器插「繼續閱讀」的編輯圖示，解決「繼續閱讀」連結出不來的問題，甚至也能自訂連結的樣式，官方版「繼續閱讀」的功能在一般改過樣板原始碼的 Blog 在套用上應該都沒問題了！最後我想麻煩的只剩那些過去用過收合 Hack 所發表的文章，當然它們沒機會再出現在首頁、但如果有用其他 Hack 顯示在搜尋或存檔的列表，可能多少還是要檢查一下，確保完全沒問題後才去移除掉文章收合相關 Hack 的程式碼。如果沒有要用到「動態收合」的效果，那麼這個官方版的「繼續閱讀」功能，不管在效率、操作和使用上，都比坊間任何類似的 Hack 來得好，只希望 Blogger 還有這類由官方版來實現比手動 Hack 更棒的功能，拜託趕緊都釋出，即便過渡時期我原來的 Hack 會失效或需要調整，至少更人性化、更有彈性的操作和閱讀環境，都是大家所樂見的～（本文已經套用新的「繼續閱讀」啦！不過透過 RSS 閱讀的看不到，請連到我 Blog 首頁才看得到..）

不瞭解 Blogger 的人，別再說 Blogger 只有自訂的彈性，一般該有的 Blog 功能它都已經具備，甚至更強更好用了（除非手賤和我一樣亂改樣板，不然套用官方樣板的還能享有無痛的各種功能升級..）～