Blogger 相關文章+任意尺寸縮圖+更多相關文章

(Pic from: kickstarter.com)2016.4.9 公告：因 Google Drive 外連失效，請勿使用本篇的程式碼，請改用新版「Blogger 相關文章 V2__安裝懶人包」


部落格想要於文末附上相關文章＋縮圖功能的話，目前最常見的選擇是 LinkWithin 與無覓。使用這兩個外掛的優點是，安裝簡單、設定容易、圖片大小相同(都是正方形)、版面一致，不需懂語法就能輕易上手。而我考慮的因素有：

1. 使用外掛的隱憂：伺服器是否穩定、該公司能營運多久。
2. Google 查到的資料：LinkWithin 安裝後抓資料要一段時間；另外可能是因為中文的緣故，抓到的相關文章不一定很相關。
3. 不喜歡圖片被裁切，很多非正方形圖片被裁成正方形很難看。

P.S. 這篇 +Julius Zhan 寫的「更新圖相關顯示小工具」，提供了使用 LinkWithin 等等一些第三方外掛的不好經驗，非常值得參考借鏡！

所以，有了製作「最新文章＋任意尺寸縮圖」的經驗後，便自己著手來寫這個 hack，並增加自己想要的功能──更多相關文章、排除特定標籤的文章。使用本 hack 可以自訂所有的細項，下面第一大點為說明這個 hack 的原理，想直接安裝請跳「二、安裝程式碼」。


一、相關文章原理

根據 Abin 的「加入相關文章功能」，這個 hack 的原理是：

1. 在 feed 裡抓到該篇文章的所有標籤。
2. 根據這些標籤，從 feed 抓包含這些標籤下的文章。
3. 從這些所有文章，亂數挑出與不與原文章重複的文章。

如果對 json 及 Blogger 語法熟悉的話，那麼根據以上三點流程可把這個 hack 寫出來。

而相關文章想要增加縮圖的功能、把縮圖從原本的正方形改為自訂尺寸的縮圖，這部分的原理在「熱門文章＋任意尺寸縮圖」也有談過。

最後把以上全部組合起來，就能做出「相關文章＋任意尺寸縮圖」了。而「更多相關文章」這個功能其實很簡單，做一個按鈕，按下後重複執行一次程式，就能呈現另一次的亂數效果了。



二、安裝程式碼

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

跟前幾篇縮圖相關的文章一樣，圖片經由 Blogger 上傳或放在 PICASA 的話，就能更改實際尺寸，其他圖床只能按比例放大縮小。以下為安裝步驟──

1. 到 Blogger 後台 → 範本 → 編輯 HTML

2. 相關文章的程式碼通常放在文章區塊的最末端，最遠的極限必須放在以下程式碼的前一行：

</b:includable>
<b:includable id='comment_picker' var='post'>

2014.3.26 更正：Blogger 範本內容似有變更，以上內容無效。除了可參考「Blogger 範本__(三)文章及留言區塊的程式碼」來查閱自己在範本中想放的位置，也可參考以下的建議，例如將本文程式碼安裝在以下字串的前一行：

<div class='post-footer-line post-footer-line-2'>
如果使用者是新範本的話，搜尋以上字串時會有兩個結果，而第一個結果是在行動範本的區塊，因此請安裝在第二個搜尋結果，才能正常顯示。

或是安裝在以下字串的前一行：

<div class='post-footer-line post-footer-line-3'>

3. 選定要放置的位置後，以下為安裝的程式碼：


2014.4.17 更新：原本 AS 行的 js 檔路徑為 "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/related-post-130701-min.js"，但最近似乎流量遭到限制，因此更改路徑為 "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/related-post-140416-min.js"。建議參照本文開頭的「2013.8.9 公告」，將 js 檔存放到自己的 google drive。

藍、紅字為可自訂的參數，每行後面均有綠字提示如何修改；而最重要的是 F～G 行的紅字，F 行填入想要顯示的相關文章數目、G 行填入縮圖的寬度(px值)，就可以直接試試看效果了。而想要看展示及「更多相關文章」功能的話，請見文末的相關文章區塊，可以先試玩一下。

如果滿意的話，其他參數不一定要變動；想要調整更多細項，請看下面的詳解。


三、自訂參數詳細說明

以下行號請參考上面的程式碼──

F：本程式並不限定相關文章只出現一排，填入的數目多，出現兩排、三排都是可以的。而且程式會根據部落格的寬度自行調整每排相關文章的數量，如果部落格將側邊欄隱藏起來的話，每排相關文章可顯示的數目就能增加。

G：填入 F 行的數目後，由於每個部落格的寬度都不一樣，本行的參數必須試著加寬或縮小，避免最右邊的空白太多。以本站文章區的寬度為例，預設值 120 為可讓一排裝下 4 篇文章的適切寬度。

H：如果部落格的每篇文章縮圖比例不完全一樣時，需要更改本行數值，請參考「四、調整縮圖尺寸的方法」。

I：如果部落格的每篇文章縮圖比例不完全一樣時，需要更改本行數值，請參考「四、調整縮圖尺寸的方法」。

J：如綠字敘述

K：若更改了文章標題的字型大小後，也請注意一下行高的效果，如果不美觀的話再調整行高的參數。

L：如果一篇文章有 3 個標籤，那麼本參數 20 的意思為，從這 3 個標籤的 feed 中各抓最新的 20 篇文章來當相關文章的樣本。這個數值越大的話讀取後台資料的時間越長，且如果一篇文章的標籤越多，讀取的時間也是成正比。

我看過某些部落格一個標籤下有一、兩百篇文章，如果本參數設成 20 則只有最新 20 篇文章有機會露臉；但如果想讓舊文章露臉，將本參數設成 150 這樣的數值又太誇張，會嚴重影響系統效能。所以，請自行拿捏一下吧。

M：如綠字敘述

N：如果想改邊框樣式的話，請修改 border 的 CSS 數值，例如：border: 1px solid #eeeee

O：文章沒圖片時會用此行的圖片代替，請改為自己的預設圖片，寬度最好是 G 行數值的兩倍。

P：若不要顯示「更多相關文章」功能的話，Y 請改為 N。

Q：按鈕圖片可改為自訂圖案，寬度請設 200px。

R：如綠字敘述

Y～Z：部落格的某些文章是不需要相關文章功能的，例如 "站務" 類的文章。因此如果想排除某些標籤顯示相關文章功能的話，把 Y～Z 行的「站務」、「站務留言板」等標籤替代為自己的標籤即可。

想要排除幾個標籤，Y～Z 就塞進幾行這樣的敘述；同樣的，在 AM～AN 就要有相等數量的 </b:if> 結尾。

而如果全部的標籤都要相關文章功能的話，那麼 Y～Z 行與 AM～AN 行都可刪除。


四、調整縮圖尺寸的方法

如果每篇文章的第一張圖片跟 WFU BLOG 一樣，先裁好相同比例才上傳的話，那麼這個 hack 大致上只需要調整 F、G 行的參數，版面就很美觀了。但如果文章的第一張圖片沒經過處理，那麼就會有版面不美觀的問題，請依照以下兩種狀況處理：

1. 縮圖比例差異不大時：

假設部落格文章的第一張圖大多是橫向的長方形，而且比例差異不大，那麼可以在 H 行填入自設的縮圖高度，強制讓每張縮圖的尺寸一樣，而圖片又不至於變形的明顯，這樣版面就能一致了。

而同樣是橫向長方形，有的高、有的扁，強制高度一樣而導致變形嚴重的話，請採用下一點的方法。

2. 縮圖比例差異很大時：

如果部落格文章第一張圖的形狀不一，有的正方形、有的橫躺型、有的直立型，那麼也許強制裁切成正方形是讓版面美觀的唯一解。此時請將 I 行參數改為 "Y"，並配合 G 行調整圖片寬度，讓版面美觀。當 I 行參數改為 "Y" 後，H 行的圖片高度參數將會被無視。


五、小結

本篇程式碼的安裝方式及「更多相關文章功能」，均使用動態載入、動態讀取的方式，完全不影響網頁的載入速度。另外已儘可能將想得到的參數都提供出來設定，應該是能夠解決各種狀況下的版面問題。如果使用上仍有問題的話，或是有任何意見都歡迎提出，希望能讓這個 hack 更為完善。



六、常見 FAQ

Q1: 為何小工具有時無法顯示？

Ans: 請參考本文「2014.4.17 更新」的內容，Google Drive 可能開始流量管制，建議按照「2013.8.9 公告」的指示，將 js 檔上傳到自己的空間，進行分流。


Q2: 為何有些文章無法顯示這個小工具？

Ans: 可能有兩種原因──

• A.目前發現標籤名稱使用某些特殊符號的話，Blogger 會進行轉碼，導致讀取資料錯誤，例如全形標點符號 "、" 請避免使用。
• B.若文章標題使用單、雙引號('或")的話，會造成 javascript 當掉，請避免使用。

Q3: 為何某些文章無法顯示縮圖？

Ans: 一方面請確定你使用的是 PICASA 圖床；一方面留言 #34 提到使用了 Windows Live Writer，也可能造成圖片無法產生縮圖，因此建議無法顯示縮圖的文章，請參考「選擇喜歡的圖片當作 Blogger 文章縮圖(封面圖)」，將文章的第一張圖，改為由 blogger 後台上傳即可。