2015年6月12日

Blogger 相關文章 V3

A+
這個工具使用了「相關文章」的版本號,但其實跟「相關文章 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:如果使用官方範本的話,這一行基本上不必動。此參數代表「相關文章」會出現在文章結束處。



四、使用說明


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'>

更多實用工具:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。