「舊版相關文章」的安裝方式稍微麻煩、複雜一些,如果對 Blogger 範本的操作不太熟的讀者,可能就無法安裝成功。因此,這個新版本改成安裝懶人包的方式,算是一個步驟就能完成安裝,相信不會再有安裝失敗的情形發生。
另外,WFU BLOG 的工具更新不一定會有版本號,但這個相關文章使用了 V2 的版本號,代表有重大變革,因此稍後會有詳細介紹。
有了這些新的功能,此版本可說是 Blogger 平台功能最強的「相關文章」工具,其勝過 LinkWithin 的理由可參考「舊版相關文章」→ 文章開頭的說明及舉例;而不建議安裝第三方工具的原因及影響請參考「為何部落格最好避免第三方外掛」。
以上範例網頁顯示的是裁切成正方形的 90x90 (px) 縮圖效果。
1. 抽樣方式進化
舊版抽樣的母體,為每個標籤近期的 N 篇文章(可自訂);新版的抽樣母體不必再額外設定,會從每個標籤的所有文章來抽樣→ 這代表年代再久遠的文章都有機會現身。
順帶一提,LinkWithin 雖掛名 "相關文章" 工具,其實抽樣的文章多半不相關,若掛名 "隨機文章" 比較恰當。
2. 任意尺寸縮圖進化
舊版任意尺寸縮圖的技術比較不成熟,選擇保持原圖比例時,當寬度固定後,每張縮圖的高度會不一致;新版的任意尺寸縮圖,不但原圖比例能保持,也能裁切成任意尺寸的縮圖,讓版面保持一致、美觀。
3. 圖片可在大陸顯示
根據「讓大陸讀者看到 Picasa 圖片」的原理,縮圖的通訊協定一律轉換為大陸可讀取的 https。
4. 更多相關文章功能
新版的此功能,版面改的比較簡潔、直覺;按下「更多相關文章」按鈕,便會重新篩選出一組新的相關文章。
5. CSS 可自訂
新版所有區塊的 CSS 全部開放自訂。
另外,有兩點注意事項需要先瞭解一下:
安裝過舊版相關文章的話,請先將舊版程式碼完整移除。
1. CSS 樣式
請到後台「範本」→「編輯 HTML」,搜尋</head> 這個字串,找到後在此字串的前一行,插入以下程式碼:
2. 主程式碼
接著請搜尋</body> 這個字串,找到後在此字串的前一行,插入以下程式碼:
可先存檔看效果,預設參數將顯示裁切成 120x80 (px) 的長方形縮圖,類似本文留言區塊上方的相關文章效果(或是下圖)。
注意事項:由於前陣子發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者參考以上文章連結,自行將 js 檔分流:
需要修改參數的話,請跳到下個段落。想看正方形縮圖效果可前往範例網頁:
如果想要自訂參數的話,請對照程式碼行號──
E:顯示相關文章的數量
F:設定縮圖的寬度
G:設定縮圖的高度
H:建議不要變更預設值,"Y" 代表縮圖會從原圖適當地裁切成指定的尺寸。如非想要讓縮圖變形,那麼參數改為 "N" 的話,代表縮圖強制從原圖變形為指定的尺寸。
I:相關文章工具的標題文字
J:可自訂 "更多相關文章" 按鈕的字元或圖示,也可使用 http 開頭的圖片網址。
K:文章沒有縮圖時的替代圖片,可改為自訂圖片網址(只限 PICASA 圖片)。請特別注意紅字部份的參數,在圖檔名稱之前的參數 "s????"(或其他各種英文混合數字的參數),請務必改成 "s72-c"。不清楚原理的話,可參考「PICASA 圖示製作技巧」→「一、PICASA 圖片規則」。
舉個簡單的例子,最常看到的 PICASA 圖片網址型態為 http://.../s1600/wfu.jpg → 請改為 http://.../s72-c/wfu.jpg
L:如果希望這個小工具出現在留言區塊之前的話,那麼不必變動此參數;如果是非官方範本、或想擺放在自訂位置,請更改本行參數──
如果想要自訂 CSS 的話,請對照 CSS 區塊的綠字提示,即可找到對應的區塊來修改參數。
特別提出一點,/* 文章標題 */這個區塊設計了特別的參數 -webkit-line-clamp: 3,如果是 Chrome 家族的瀏覽器,文章標題預設最多顯示三行,超過會顯示 "...",可以用來控制文章標題的高度,讓版面美觀。
日後若有常見問題,會補充在此。
另外,WFU BLOG 的工具更新不一定會有版本號,但這個相關文章使用了 V2 的版本號,代表有重大變革,因此稍後會有詳細介紹。
有了這些新的功能,此版本可說是 Blogger 平台功能最強的「相關文章」工具,其勝過 LinkWithin 的理由可參考「舊版相關文章」→ 文章開頭的說明及舉例;而不建議安裝第三方工具的原因及影響請參考「為何部落格最好避免第三方外掛」。
以上範例網頁顯示的是裁切成正方形的 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」,搜尋
<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. 主程式碼
接著請搜尋
可先存檔看效果,預設參數將顯示裁切成 120x80 (px) 的長方形縮圖,類似本文留言區塊上方的相關文章效果(或是下圖)。
注意事項:由於前陣子發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者參考以上文章連結,自行將 js 檔分流:
- 將程式碼 R行的 js 檔 "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/related-post-2-140516-min.js" 上傳到自己的 Google Drive 空間 → 取得自己的 js 檔連結 → 將自己的 js 檔連結置換原本的字串。
需要修改參數的話,請跳到下個段落。想看正方形縮圖效果可前往範例網頁:
三、修改參數
如果想要自訂參數的話,請對照程式碼行號──
E:顯示相關文章的數量
F:設定縮圖的寬度
G:設定縮圖的高度
H:建議不要變更預設值,"Y" 代表縮圖會從原圖適當地裁切成指定的尺寸。如非想要讓縮圖變形,那麼參數改為 "N" 的話,代表縮圖強制從原圖變形為指定的尺寸。
I:相關文章工具的標題文字
J:可自訂 "更多相關文章" 按鈕的字元或圖示,也可使用 http 開頭的圖片網址。
K:文章沒有縮圖時的替代圖片,可改為自訂圖片網址(只限 PICASA 圖片)。請特別注意紅字部份的參數,在圖檔名稱之前的參數 "s????"(或其他各種英文混合數字的參數),請務必改成 "s72-c"。不清楚原理的話,可參考「PICASA 圖示製作技巧」→「一、PICASA 圖片規則」。
舉個簡單的例子,最常看到的 PICASA 圖片網址型態為 http://.../s1600/wfu.jpg → 請改為 http://.../s72-c/wfu.jpg
L:如果希望這個小工具出現在留言區塊之前的話,那麼不必變動此參數;如果是非官方範本、或想擺放在自訂位置,請更改本行參數──
- 如果要填入區塊的 id,請填入 "#" + id 名稱,例如 "#related-post"。
- 如果要填入區塊的 class,請填入 "." + class 名稱,例如 ".related-post"。
四、修改 CSS / 設定文章標題高度
如果想要自訂 CSS 的話,請對照 CSS 區塊的綠字提示,即可找到對應的區塊來修改參數。
特別提出一點,/* 文章標題 */這個區塊設計了特別的參數 -webkit-line-clamp: 3,如果是 Chrome 家族的瀏覽器,文章標題預設最多顯示三行,超過會顯示 "...",可以用來控制文章標題的高度,讓版面美觀。
五、常見 FAQ
日後若有常見問題,會補充在此。