另外,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. 主程式碼
接著請搜尋
請跳到下個段落看如何修改參數。
三、修改參數
如果想要自訂參數的話,請對照程式碼行號──
E:顯示相關文章的數量(例如設為 4 代表最多顯示 4 篇,若該篇文章的標籤,沒有足夠的相關文章,則不一定能顯示到 4 篇)
F:設定縮圖的寬度
G:設定縮圖的高度
H:建議不要變更預設值,"Y" 代表縮圖會從原圖適當地裁切成指定的尺寸。如非想要讓縮圖變形,那麼參數改為 "N" 的話,代表縮圖強制從原圖變形為指定的尺寸。
I:相關文章工具的標題文字
J:可自訂 "更多相關文章" 按鈕的字元或圖示,也可使用 http 開頭的圖片網址。
K:文章沒有縮圖時的替代圖片,可改為自訂圖片網址(只限 PICASA 圖片)。
2014.7.11 更新:以下限制全部刪除,更新程式碼後,目前已不需要限制圖片網址的格式 →
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>
更多實用工具:
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。