2012年9月1日 星期六

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

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

Wayne Fu 0 A+

(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 後台上傳即可。
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP