[工具] Blogger 隨機文章 + 自適應尺寸縮圖

2016.5.26 公告：目前已有新版本，可改安裝「隨機文章 V2 + 輪播效果」。

前陣子幫朋友安裝放在文章結束處的「系列文」功能，以及放在留言區塊前面、類似 Linkwithin 的「相關文章」工具，跟他解釋「系列文可以從文章相關的標籤，隨機抽選指定的文章數量列出」，結果他反問「系列文挑出來的推薦文章跟 "相關文章" 會重複，可不可以把 "相關文章" 改成 "隨機文章"？」。

果然眾人智慧超越個人智慧，我原本的使用方式無法將效用最大化、來讓更多不同的文章曝光，如果放了 "系列相關文章" 功能，那麼有縮圖的推薦文章區塊，就應該使用隨機文章才是。

因此最近把「相關文章」的模組改一下，就成了「隨機文章」。以下先說明原理、特點，如果想直接安裝，請跳至「二、安裝 jQuery 及 CSS」。

一、隨機文章的原理及特色

1. 原理

古早的 Blogger 隨機文章工具有不少缺點：

• 一次需要讀取全部的 feed 才能隨機抽樣，部落格文章有數百篇時，執行速度就是悲劇了。
• Blogger feed 一次最多只能讀取 500 筆資料，超過 500 篇文章的部落格，早期文章就永遠無法抽樣了。
• 無法排除特定的文章不顯示

本文的工具在設計上並非讀取網站的 feed，而是讀取單篇文章的 feed，所以速度快、不會受到網站文章數的影響，沒有上述的缺點。


2. 特色

這個工具除了改進以上提到的項目，在設計上還有下面這些特點：

• 可自訂縮圖長寬比例
• 只需指定顯示的縮圖數量，縮圖會自動為調整最適寬度
• 可顯示文章的留言數，這是判斷文章熱門度的一個指標
• Chrome 瀏覽器可限制文章標題最多顯示三行，版面比較美觀
• 可排除特定標籤字串的文章不顯示 → 例如 "站務" 相關的文章沒有必要出現在隨機推薦文章，可設定排除標籤含 "站務" 字串的所有文章

3. 版面樣式

根據「黃金比例」的說明，圖片在視覺上最有美感的比例為 1 : 0.618，因此這個隨機文章的縮圖比例，預設值就是黃金比例。

如果一行設定為擺放四篇文章，四個縮圖的寬度效果請見文章開頭的示意圖。

如果一行設定為擺放三篇文章，三個縮圖的寬度效果請見下圖：




如果一行設定為擺放兩篇文章，兩個縮圖的寬度效果請見下圖：




如果習慣傳統的正方形縮圖，一行可以擺放較多文章，五個縮圖的寬度效果請見這個範例網頁：

點此前往範例網頁

二、安裝 jQuery 及 CSS

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

1. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/* 隨機文章 */
.rndPost_caption { /* 標題文字 */
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-align: left;
margin-top: 10px;
}
.rndPost_allPost { /* 隨機文章區塊 */
display: table-row;
}
.rndPost_post { /* 個別文章區塊 */
padding: 5px;
display: table-cell;
transition: background .7s;
-webkit-transition: background .7s;
-moz-transition: background .7s;
}
.rndPost_post:hover {
background: #f5f5f5;
text-decoration: none;
}
.rndPost_post:hover .rndPost_picFrame {
border: 1px solid transparent;
}
.rndPost_post:hover .rndPost_pic {
opacity: 0.5;
}
.rndPost_post:hover .rndPost_comm {
opacity: 1;
}
.rndPost_picFrame { /* 圖片外框 */
padding: 2px;
border: 1px solid #ddd;
position: relative;
transition: border .7s;
-webkit-transition: border .7s;
-moz-transition: border .7s;
}
.rndPost_pic { /* 圖片 */
border-radius: 5px;
display: block;
opacity: 1;
transition: opacity .7s;
-webkit-transition: opacity .7s;
-moz-transition: opacity .7s;
}
.rndPost_comm {
position: absolute;
right: 10px;
bottom: 10px;
color: #222;
text-shadow: 1px 1px 2px #bbb;
font-size: 11px;
opacity: 0;
transition: opacity .7s;
-webkit-transition: opacity .7s;
-moz-transition: opacity .7s;
}
.rndPost_comm img {
width: 12px;
height: auto;
vertical-align: -3px;
}
.rndPost_title { /* 文章標題 */
font-size: 13px;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .7s;
-webkit-transition: color .7s;
-moz-transition: color .7s;
}
</style>


第一行可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jquery，以免重複安裝。

其餘的部分，如果對 CSS 熟悉可自行修改參數，各區塊請見綠色註解的提示。

三、安裝程式碼

接著請搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：



以下參數修改請參照以上程式碼行號：

F：一行顯示的文章數量，此為最重要的參數，設定之後系統會自動調整圖片寬度

H：如果不想顯示黃金比例的縮圖，例如要改為正方形的話，請將紅色數字改為 1

I：可自訂顯示的大標題字串

J：藍色字串請改為自訂的「無縮圖替代圖片網址」

K：預設滑鼠經過時，會浮現留言數量。若不需要此功能，請改為 0

L：如果不需要排除特定標籤的文章(整個網站的文章都想顯示)，請刪除所有字串，留下 [] 即可。預設的字串以本站來舉例，代表所有樹狀標籤中包含 "站務" 字串的標籤文章、以及所有包含 "休閒" 字串的標籤文章，都不會出現在隨機文章中。

M：此工具預設會出現在留言區塊之前。如果要擺到到別的位置，請將字串改為 "." + class 名、或是 "#" + id 名稱。

Q：由於「Google Drive 關閉外連」功能，綠色字串的 JS 網址是無法外連的，請參照「WFU BLOG 外連 JS 變更及操作說明」，將這個連結下載後存成 JS 檔，上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後，置換本行的綠色網址字串。

想要先試玩一下效果，可在本站文章後面、留言區塊之前找到隨機文章區塊；或是也可前往前面提到的「範例網頁」測試。

四、常見 FAQ

日後若有常見問題，會持續補充在此。

Q1: 有些文章無法顯示縮圖？

Ans: Blogger 的縮圖功能，需要使用 PICASA 圖床(G+ 相簿)才能自動產生，因此使用其他圖床的話，這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」，在 Blogger 後台上傳圖片，放在文章最前面的位置，就一定能顯示縮圖了。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理