2014年5月1日 星期四

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

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

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

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

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







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



一、V2 版的特色及提醒


1. 抽樣方式進化

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

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


2. 任意尺寸縮圖進化

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


3. 圖片可在大陸顯示

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


4. 更多相關文章功能

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


5. CSS 可自訂

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


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



二、安裝程式碼


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

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

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 圖片網址型態為 http://.../s1600/wfu.jpg → 請改為 http://.../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/AVvXsEioe5mlKqhadCQ0hnGW73xLLBFrw0yvGzLfJopsWdQE6foAxuaHRQNafroSK9-g2bqSCKzG_R9gv3mjN9B3yhiad5uBvIwQcseT31k-VzpTHUGIlSFYwXWw2n3BA8ld3KyiRrtnnTeyKAI/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>


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP