[小工具]Blogger 相關文章 V2__安裝懶人包

「舊版相關文章」的安裝方式稍微麻煩、複雜一些，如果對 Blogger 範本的操作不太熟的讀者，可能就無法安裝成功。因此，這個新版本改成安裝懶人包的方式，算是一個步驟就能完成安裝，相信不會再有安裝失敗的情形發生。

另外，WFU BLOG 的工具更新不一定會有版本號，但這個相關文章使用了 V2 的版本號，代表有重大變革，因此稍後會有詳細介紹。

有了這些新的功能，此版本可說是 Blogger 平台功能最強的「相關文章」工具，其勝過 LinkWithin 的理由可參考「舊版相關文章」→ 文章開頭的說明及舉例；而不建議安裝第三方工具的原因及影響請參考「為何部落格最好避免第三方外掛」。

點此看範例網頁

(圖片出處: pexels.com)




以上範例網頁顯示的是裁切成正方形的 90x90 (px) 縮圖效果。

一、V2 版的特色及提醒

1. 抽樣方式進化

舊版抽樣的母體，為每個標籤近期的 N 篇文章(可自訂)；新版的抽樣母體不必再額外設定，會從每個標籤的所有文章來抽樣 → 這代表年代再久遠的文章都有機會現身。

順帶一提，LinkWithin 雖掛名 "相關文章" 工具，其實抽樣的文章多半不相關，若掛名 "隨機文章" 比較恰當。


2. 任意尺寸縮圖進化

舊版任意尺寸縮圖的技術比較不成熟，選擇保持原圖比例時，當寬度固定後，每張縮圖的高度會不一致；新版的任意尺寸縮圖，不但原圖比例能保持，也能裁切成任意尺寸的縮圖，讓版面保持一致、美觀。


3. 圖片可在大陸顯示

根據「讓大陸讀者看到 Picasa 圖片」的原理，縮圖的通訊協定一律轉換為大陸可讀取的 https。


4. 更多相關文章功能

新版的此功能，版面改的比較簡潔、直覺；按下「更多相關文章」按鈕，便會重新篩選出一組新的相關文章。


5. CSS 可自訂

新版所有區塊的 CSS 全部開放自訂。


另外，有兩點注意事項需要先瞭解一下：

• Blogger 的縮圖功能，需要使用 PICASA 圖床(G+ 相簿)才能自動產生，因此使用其他圖床的話，這個小工具很可能無法正常顯示縮圖。無論如何，PICASA 與 Blogger 都是 Google 產品，建議參考這篇「使用 PICASA 的三大好處」，儘早改用 PICASA。
• 請參考這篇「Google Drive(js檔)疑似流量有限速？ 檔案自行分流教學」，自行置換本文程式碼的 js 連結。

二、安裝程式碼

安裝過舊版相關文章的話，請先將舊版程式碼完整移除。

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

1. CSS 樣式

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

<style>
/* 相關文章2 */
.rltPost2_bar { /* 標題欄 */
}
.rltPost2_caption { /* 標題文字 */
font-size: 16px;
font-weight: bold;
line-height: 20px;
}
.rltPost2_allPost { /* 相關文章區塊 */
display: table-row;
}
.rltPost2_post { /* 個別文章區塊 */
padding: 5px;
display: table-cell;
}
.rltPost2_post:hover {
background: #ecf5ff;
text-decoration: none;
}
.rltPost2_post:hover .rltPost2_picFrame {
border: 1px solid transparent;
}
.rltPost2_picFrame{ /* 圖片外框 */
padding: 2px;
border: 1px solid #ddd;
}
.rltPost2_pic { /* 圖片 */
border-radius: 5px;
}
.rltPost2_title { /* 文章標題 */
font-size: 13px;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rltPost2_more { /* 更多文章按鈕 */
vertical-align: middle;
display: table-cell;
font-size: 60px;
}
.rltPost2_more:hover {
background: #ecf5ff;
}
</style>


2. 主程式碼

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


請跳到下個段落看如何修改參數。

三、修改參數

如果想要自訂參數的話，請對照程式碼行號──

E：顯示相關文章的數量(例如設為 4 代表最多顯示 4 篇，若該篇文章的標籤，沒有足夠的相關文章，則不一定能顯示到 4 篇)

F：設定縮圖的寬度

G：設定縮圖的高度

H：建議不要變更預設值，"Y" 代表縮圖會從原圖適當地裁切成指定的尺寸。如非想要讓縮圖變形，那麼參數改為 "N" 的話，代表縮圖強制從原圖變形為指定的尺寸。

I：相關文章工具的標題文字

J：可自訂 "更多相關文章" 按鈕的字元或圖示，也可使用 http 開頭的圖片網址。

K：文章沒有縮圖時的替代圖片，可改為自訂圖片網址(只限 PICASA 圖片)。

2014.7.11 更新：以下限制全部刪除，更新程式碼後，目前已不需要限制圖片網址的格式 → 請特別注意紅字部份的參數，在圖檔名稱之前的參數 "s????"(或其他各種英文混合數字的參數)，請務必改成 "s72-c"。不清楚原理的話，可參考「PICASA 圖示製作技巧」→「一、PICASA 圖片規則」。

舉個簡單的例子，最常看到的 PICASA 圖片網址型態為 https://.../s1600/wfu.jpg → 請改為 https://.../s72-c/wfu.jpg

L：如果希望這個小工具出現在留言區塊之前的話，那麼不必變動此參數；如果是非官方範本、或想擺放在自訂位置，請更改本行參數──

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

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


預設參數將顯示裁切成 120x80 (px) 的長方形縮圖，類似本文留言區塊上方的相關文章效果(或是下圖)。




想看正方形縮圖效果可前往範例網頁：

點此看範例網頁

四、修改 CSS / 設定文章標題高度

如果想要自訂 CSS 的話，請對照 CSS 區塊的綠字提示，即可找到對應的區塊來修改參數。

特別提出一點，/* 文章標題 */ 這個區塊設計了特別的參數 -webkit-line-clamp: 3，如果是 Chrome 家族的瀏覽器，文章標題預設最多顯示三行，超過會顯示 "..."，可以用來控制文章標題的高度，讓版面美觀。

五、常見 FAQ

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

Q1: "相關文章推薦" 的大標題有時候會顯示不出來，有時候可以，不知道可能是哪裡有問題呢?

Ans: 有兩種可能：

• 該篇文章的標籤沒有其他文章，就無法產生相關文章。
• 可能是留言 #7 我回覆的狀況，縮圖有時能抓到有時抓不到 → 這是原始版本的 bug，已經更新了程式碼 R 行的 js 檔內容，如果曾自行上傳 js 檔到自己的 google drive，請更新自己的 js 檔即可。

Q2: 安裝以後出現第一格跑掉的情況(縮圖尺寸變得很寬)，調了很久找不出問題所在，求救...

Ans: 看了一下第一張圖，原來你的"無縮圖的替代圖片"的網址長這樣：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRl2jXwoB-naRE96wqC11anYE5XK8z7SFDFKCQQEMi2bwo3P3nxxNgLdT2Kv64ShT3LQbcJKk_FiuMs1PnTlqwPBT32huVcwwKwDGwMv6Cc6reQ6x4E1FJbpZm-NKfn1bMjz7iWJnw_bI/s300-no/no_img.gif → 請參考程式碼 K 行的說明，將 "s300-no" 的字串改為 "s72-c" 即可～


Q3: 我昨天換了圖源（為了增加專頁的瀏覽量）之後，「相關文章」都抓不到圖片，只能顯示預設圖片，不知道為什麼？

Ans: 抓不到圖片表示部落格 feed 抓不到縮圖資料，可能性有很多種，圖床不對、格式不對、隱私權設定不對...。要讓 Blogger 抓到縮圖，最簡單的方法是文章裡第一張圖片，從後台編輯文章的畫面上傳，就絕對抓得到了。

另外感謝留言 #45 Julius Zhan 回報，目前從 PICASA 網路相簿進入後，取得的圖片網址格式全面改為 sxxx-Icxx 這樣的格式，此格式將無法改變參數來調整尺寸，會讓這個工具的縮圖功能失效，因此請避免從 PICASA 網路相簿取得圖片網址。

P.S. 同樣的一張圖片，G+ 相片取得的網址格式仍然正常，因此 G+ 相片的圖片網址可用在本工具。


Q4: 我某些文章可以顯示相關文章、某些文章不行？

Ans: 除了「官方文件」註明標籤名稱不得使用的字元 &<>@!+, 之外，注意到你的標籤使用了 "#"，也請不要使用這個字元，相關文章就能正常顯示了。


Q5: 安裝了以後，無法顯示「相關文章」？

Ans: 有兩種可能：

• 請參考「一、V2 版的特色及提醒」→「第1點」來瞭解這個工具的原理，文章尚未設定標籤、或是該文章的標籤都沒有其他文章的話，將無法產生相關文章。
• 請參考「二、安裝程式碼」→「2. 主程式碼」→「注意事項」，將程式碼 R 行的 js 檔進行分流，否則 js 會因流量限制可能無法執行。

Q6: 能否在文章頁面才顯示「相關文章」，其他頁面不要出現？

Ans: 請在「二、安裝程式碼」→「2. 主程式碼」這部分的程式碼，使用頁面判斷式即可，最前面加入這行：

<b:if cond='data:blog.pageType == "item"'>
最後面加入這行：

</b:if>

Q7: 網站升級為 HTTPS 後小工具失效？

Ans: 請在範本 </head> 前一行，插入以下 jQuery 程式碼即可：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>



更多實用工具：

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