(Pic from: kickstarter.com,psdgraphics.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 後台上傳即可。
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。