手動複製這些連結自然是很麻煩,也是可安裝一些小工具來替我們做這件事。其實 WFU 已經寫過不少這一類的程式,而版本之多還可能讓讀者嚇一跳。
那麼為何還要再額外寫本篇的版本?究竟與其他版本的差異為何?請讀者先看以下各版本的功能比較,再決定安裝哪一個比較適合你的網站。
(圖片出處: lifeofpix.com)
一、各種延伸閱讀小工具
1. 系列文功能
- 安裝網址:讓 Blogger 自動顯示系列文章
- 藉由設定 "關鍵字",可在文末列出包含 "關鍵字" 的相關文章標題
- 必須每篇文章手動設定
2. 分頁功能
- 安裝網址:讓 Blogger 過長的文章自動產生數字分頁
- 此為系列文的加強版
- 若系列文的標題,都有設定數字序號,安裝此工具後,可在文末自動顯示數字分頁。
- 必須每篇文章手動設定
3. 相關文章 V2
- 安裝網址:Blogger 相關文章 V2__安裝懶人包
- 從該篇文章的標籤,隨機抽選相關文章來顯示
- 可自訂縮圖尺寸
- 不需每篇文章手動設定
4. 隨機文章
- 安裝網址:Blogger 隨機文章 + 自適應尺寸縮圖
- 從網站所有文章,隨機抽選文章來顯示
- 可自訂縮圖比例
- 自適應版面寬度(RWD)
- 不需每篇文章手動設定
5. 相關文章 V3
- 安裝網址:Blogger 相關文章 V3
- 每篇文章手動設定的話,可指定標籤名稱,隨機抽選相關文章來顯示
- 可手動設定,顯示多個不同的相關文章區塊
- 若文章沒指定標籤名稱,會自動從該篇文章的標籤,隨機抽選相關文章來顯示
- 文字版,不顯示縮圖
- 可手動設定、也可不設定
6. 延伸閱讀
- 此為本篇工具的版本
- 等於是「相關文章 V2」,去掉縮圖的版本(也就是文字版)
- 不需每篇文章手動設定
7. 系列文 + 相關文章 V3
- 結合「系列文」與「相關文章 V3」
- 可自行根據文章性質,設定為顯示「系列文」、或顯示「相關文章」
- 此為未公開、自用的版本
二、準備動作
請到後台「範本」→「編輯 HTML」,游標點進範本區塊,再搜尋
<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 熟悉可自行修改參數。
三、安裝程式碼
接著請搜尋
以下參數修改請參照以上程式碼行號:
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 檔沒問題,可能是伺服器暫時有問題。
- 除了「官方文件」註明標籤名稱不得使用的字元 &<>@!+, 之外,也請不要使用 "#" 這個字元,相關文章就能正常顯示了。
更多實用工具:
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。