Blogger 相關文章 V3

這個工具使用了「相關文章」的版本號，但其實跟「相關文章 V2」的市場、用途並不相同。V2 版的文章會顯示縮圖，而 V3 版完全只有文字，難不成這個工具退化了嗎？

其實他比較偏向「系列文功能」的風格，只列出建議閱讀清單的文章標題。但篩選方式又不同，系列文是利用 "關鍵字" 來篩選，而這個 V3 版則是用 "標籤" 來篩選，與相關文章的篩選方式雷同，因此歸類於「相關文章」。

雖說只顯示文字，但功能與效果十分強大，請見後續的說明。

<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>

(圖片出處: lifeofpix.com)

一、功能介紹

請注意，此篇為加值文章，需先加入會員，並累積足夠點數才能兌換。

1. 舊文章不必設定

使用「系列文功能」功能時，必須每篇文章手動設定關鍵字，才能產生推薦給讀者的系列相關文章列表。當部落格有上百篇舊文章時，一篇篇設定就是一件大工程了。

這個 V3 版本針對此點，可讓舊文章不必手動設定，也能自動產生相關文章列表，這就幫我們節省了可觀的時間。

而相關文章列表篩選的依據為，自動抓取該篇文章的所有標籤，從這些標籤的所有文章，隨機抽出指定數量的文章，自動於文末列出。


2. 手動與自動設定並存

舊文章可自動設定，那麼新文章能不能手動設定呢？

可以的，如果你想指定列出特定標籤的相關文章，可單獨在該篇文章手動設定，那麼該篇文章就不會從所有標籤來抽樣，只會從特定標籤來抽樣，達到更精確的「相關文章」列表。


3. 支援多重標籤

這算是特殊用途，有的讀者可能想在某篇文章做出多個標籤的文章列表，那麼無論你設定幾個標籤，就能顯示幾個「相關文章」的列表。


4. 適用場合

為了縮短網頁載入時間，行動裝置不適合載入太多圖片，因此「相關文章 V2」的縮圖模式盡量不要用在行動版。取而代之的，這個 V3 版本的文字模式，就很適合用在 Blogger 行動範本。

如果要細分適用的文章性質，像是旅遊、美食類的文章，文末最好列出含相似字串文章標題，例如一系列的 "墾丁" 遊記，而這些遊記使用的標籤可能會是 "南部旅遊" 之類，這樣情況的情況使用「系列文功能」比較恰當，可以篩選出網站所有含 "墾丁" 標題的文章。

如果不需要篩選特定字串，那麼「相關文章 V3」基本上適用所有類型的網站，可篩選特定標籤、也可篩選該篇文章所有標籤的文章。

二、準備動作

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

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

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/* 相關文章 V3 start */
.rltPost3 { /* 整個區塊 */
margin: 20px 0;
font-size: 14px;
}
.rltPost3_title { /* 標題 */
text-decoration: none!important;
font-weight: bold;
color: #666!important;
}
.rltPost3 ul {
margin: 0 0 0 2em;
padding: 0;
list-style-type: disc;
}
.rltPost3 li {
margin: 0;
padding: 5px 0;
list-style-type: disc;
}
/* 相關文章 V3 end */
</style>
第一行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jquery，以免重複安裝。

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

三、安裝程式碼

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

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

F：紅色數字請改為相關文章想顯示的數量

G：藍色字串可改為自訂標題。此字串只有在該篇文章未指定篩選的標籤時，才會出現。

H：對程式碼很熟悉再更改比較好。

I：如果使用官方範本的話，這一行基本上不必動。此參數代表「相關文章」會出現在文章結束處。

四、使用說明

1. 基本使用方式

基本上，程式碼安裝完、儲存範本後，網站的每篇文章結束處，就會自動產生相關文章了。

如前所述，這個工具會自動從該篇文章的所有標籤，隨機抽選相關的文章出來。


2. 手動設定篩選標籤

如果想要讓某篇文章的推薦文章更精確，可以手動設定標題與標籤名稱。

以「Blogger 多層下拉選單實作」為例，這篇文章使用了三個標籤 " 導覽列"、"CSS"、"HTML"，而 WFU 認為會看這篇文章的讀者，可能對 Blogger "導覽列" 的相關技巧會更有興趣，那麼就可設定只篩選出 "導覽列" 的相關文章出來，效果會比混合標籤抽樣更佳。

操作流程如下：

A. 編輯該篇文章，切換到 HTML 模式。

B. 在想要顯示的地方(通常是最下方)，插入這行字串：

<div class="rltPost3" data-label="導覽列">Blogger 導覽列相關技巧：</div>
C. 以上紅色字串請置換為指定標籤名稱；藍色字串改為自訂的標題名稱。


3. 多重標籤顯示

如果一篇文章想顯示多個「相關文章」清單，那麼只要填入多行的參數字串即可，例如文章中插入以下兩行字串：

<div class="rltPost3" data-label="導覽列">Blogger 導覽列相關技巧：</div>

<div class="rltPost3" data-label="CSS">更多 CSS 相關技巧：</div>

想先看一下多重標籤的效果，可前往以下網頁：

點此看範例網頁

五、聯絡表單

加值文章關閉留言板功能，使用上有任何問題請用下面的表單與我聯繫：

稱呼：(必填)

電子郵件：(必填)

本文標題或網址：(必填)

會員編號：(必填)

請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填)

六、常見 FAQ

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

Q1: 請問v2跟V3能否並存? 設定成V3只有在手機板執行V2電腦版執行?

Ans: 因為 V3 使用了部分 V2 的演算法，同時使用了相同的變數名稱，兩個程式若在同一個頁面同時執行的話，怕會引起錯誤。

不過若是一個在手機版、一個在電腦版執行，那就不會有任何影響了，例如使用以下的 Blogger 判斷式：

<b:if cond='data:blog.isMobile'>
這裡填入行動版要執行的程式碼，例如 V3
<b:else/>
這裡填入電腦版要執行的程式碼，例如 V2
</b:if>


Q2: 非官方範本無法執行

Ans: 有些非官方範本的格式，會讓程式當掉，需要將範本中的 <div class='post-body'> 改成：

<div class='post-body' expr:id='"post-body-" + data:post.id'>

更多實用工具：

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