Blogger 延伸閱讀 [小工具][文字版]

為了讓訪客看完文章不馬上離開，我們通常會在文末設計一個區塊，稱為 "延伸閱讀" 或 "您可能對這些文章有興趣" 等等，接著手動挑選、安插一些相關文章的連結。

手動複製這些連結自然是很麻煩，也是可安裝一些小工具來替我們做這件事。其實 WFU 已經寫過不少這一類的程式，而版本之多還可能讓讀者嚇一跳。

那麼為何還要再額外寫本篇的版本？究竟與其他版本的差異為何？請讀者先看以下各版本的功能比較，再決定安裝哪一個比較適合你的網站。

點此看範例網頁

(圖片出處: lifeofpix.com)

一、各種延伸閱讀小工具

1. 系列文功能

• 安裝網址：讓 Blogger 自動顯示系列文章
• 藉由設定 "關鍵字"，可在文末列出包含 "關鍵字" 的相關文章標題
• 必須每篇文章手動設定

2. 分頁功能

• 安裝網址：讓 Blogger 過長的文章自動產生數字分頁
• 此為系列文的加強版
• 若系列文的標題，都有設定數字序號，安裝此工具後，可在文末自動顯示數字分頁。
• 必須每篇文章手動設定

3. 相關文章 V2

• 安裝網址：Blogger 相關文章 V2__安裝懶人包
• 從該篇文章的標籤，隨機抽選相關文章來顯示
• 可自訂縮圖尺寸
• 不需每篇文章手動設定

4. 隨機文章

• 安裝網址：Blogger 隨機文章 + 自適應尺寸縮圖
• 從網站所有文章，隨機抽選文章來顯示
• 可自訂縮圖比例
• 自適應版面寬度(RWD)
• 不需每篇文章手動設定

5. 相關文章 V3

• 安裝網址：Blogger 相關文章 V3
• 每篇文章手動設定的話，可指定標籤名稱，隨機抽選相關文章來顯示
• 可手動設定，顯示多個不同的相關文章區塊
• 若文章沒指定標籤名稱，會自動從該篇文章的標籤，隨機抽選相關文章來顯示
• 文字版，不顯示縮圖
• 可手動設定、也可不設定

6. 延伸閱讀

• 此為本篇工具的版本
• 等於是「相關文章 V2」，去掉縮圖的版本(也就是文字版)
• 不需每篇文章手動設定

7. 系列文 + 相關文章 V3

• 結合「系列文」與「相關文章 V3」
• 可自行根據文章性質，設定為顯示「系列文」、或顯示「相關文章」
• 此為未公開、自用的版本

二、準備動作

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，再搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/* 延伸閱讀 */
.extPost { /* 整個區塊 */
margin: 20px 0;
font-size: 14px;
}
a.extPost_caption { /* 標題文字 */
text-decoration: none;
font-weight: bold;
color: #666;
}
</style>
第一行綠色字串可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

其餘的部分，如果對 CSS 熟悉可自行修改參數。

三、安裝程式碼

接著請搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：


以下參數修改請參照以上程式碼行號：

F：紅色參數為顯示延伸閱讀的數量(例如設為 4 代表最多顯示 4 篇，但若該篇文章的標籤，沒有足夠的相關文章，則不一定能顯示到 4 篇)

G：藍色字串為延伸閱讀工具的標題文字

H：如果希望這個小工具出現在文末的話，那麼不必變動此藍字參數；如果是非官方範本、或想擺放在自訂位置，請更改本行參數──

• 如果要填入區塊的 id，請填入 "#" + id 名稱，例如 "#related-post"。
• 如果要填入區塊的 class，請填入 "." + class 名稱，例如 ".related-post"。

N：由於「Google Drive 關閉外連」功能，綠色字串的 JS 網址是無法外連的，請參照「WFU BLOG 外連 JS 變更及操作說明」，將這個連結下載後存成 JS 檔，上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後，置換本行的綠色網址字串。

存檔後即可，想要先看效果可前往範例網頁：

點此看範例網頁

四、常見 FAQ

日後若有常見問題，會持續補充在此。

Q1: 延伸閱讀的相關文章，有時候會顯示不出來，有時候可以，不知道可能是哪裡有問題呢?

Ans: 有幾種可能：

• 該篇文章的標籤沒有其他文章，就無法產生相關文章。
• 請檢查 JS 檔是否有分流；若確定 JS 檔沒問題，可能是伺服器暫時有問題。
• 除了「官方文件」註明標籤名稱不得使用的字元 &<>@!+, 之外，也請不要使用 "#" 這個字元，相關文章就能正常顯示了。

更多實用工具：

• 本站使用的 Blogger hack 及工具整理