Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 784

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

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

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

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



(圖片出處: lifeofpix.com)


一、各種延伸閱讀小工具


1. 系列文功能



2. 分頁功能



3. 相關文章 V2



4. 隨機文章



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檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流,並用「Google Drive 外連產生器 V2」取得外連網址。

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




四、常見 FAQ


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

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

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


延伸閱讀:
更多實用工具:

Viewing all articles
Browse latest Browse all 784

Trending Articles