前陣子幫朋友安裝放在文章結束處的「系列文」功能，以及放在留言區塊前面、類似 Linkwithin 的「相關文章」工具，跟他解釋「系列文可以從文章相關的標籤，隨機抽選指定的文章數量列出」，結果他反問「系列文挑出來的推薦文章跟 "相關文章" 會重複，可不可以把 "相關文章" 改成 "隨機文章"？」。果然眾人智慧超越個人智慧，我原本的使用方式無法將效用最大化、來讓更多不同的文章曝光，如果放了 "系列相關文章" 功能，那麼有縮圖的推薦文章區塊，就應該使用隨機文章才是。
因此最近把「相關文章」的模組改一下，就成了「隨機文章」。以下先說明原理、特點，如果想直接安裝，請跳至「二、安裝 jQuery 及 CSS」。
一、隨機文章的原理及特色
1. 原理
古早的 Blogger 隨機文章工具有不少缺點：
- 一次需要讀取全部的 feed 才能隨機抽樣，部落格文章有數百篇時，執行速度就是悲劇了。
- Blogger feed 一次最多只能讀取 500 筆資料，超過 500 篇文章的部落格，早期文章就永遠無法抽樣了。
- 無法排除特定的文章不顯示
本文的工具在設計上並非讀取網站的 feed，而是讀取單篇文章的 feed，所以速度快、不會受到網站文章數的影響，沒有上述的缺點。
2. 特色
這個工具除了改進以上提到的項目，在設計上還有下面這些特點：
- 可自訂縮圖長寬比例
- 只需指定顯示的縮圖數量，縮圖會自動為調整最適寬度
- 可顯示文章的留言數，這是判斷文章熱門度的一個指標
- Chrome 瀏覽器可限制文章標題最多顯示三行，版面比較美觀
- 可排除特定標籤字串的文章不顯示→ 例如 "站務" 相關的文章沒有必要出現在隨機推薦文章，可設定排除標籤含 "站務" 字串的所有文章
3. 版面樣式
根據「黃金比例」的說明，圖片在視覺上最有美感的比例為 1 : 0.618，因此這個隨機文章的縮圖比例，預設值就是黃金比例。
如果一行設定為擺放四篇文章，四個縮圖的寬度效果請見文章開頭的示意圖。
如果一行設定為擺放三篇文章，三個縮圖的寬度效果請見下圖：
如果一行設定為擺放兩篇文章，兩個縮圖的寬度效果請見下圖：
如果習慣傳統的正方形縮圖，一行可以擺放較多文章，五個縮圖的寬度效果請見這個範例網頁：
二、安裝 jQuery 及 CSS
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
1. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋
<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 熟悉可自行修改參數，各區塊請見綠色註解的提示。
三、安裝程式碼
接著請搜尋
以下參數修改請參照以上程式碼行號：
F：一行顯示的文章數量，此為最重要的參數，設定之後系統會自動調整圖片寬度
H：如果不想顯示黃金比例的縮圖，例如要改為正方形的話，請將紅色數字改為 1
I：可自訂顯示的大標題字串
J：藍色字串請改為自訂的「無縮圖替代圖片網址」
K：預設滑鼠經過時，會浮現留言數量。若不需要此功能，請改為 0
L：如果不需要排除特定標籤的文章(整個網站的文章都想顯示)，請刪除所有字串，留下 []即可。預設的字串以本站來舉例，代表所有樹狀標籤中包含 "站務" 字串的標籤文章、以及所有包含 "休閒" 字串的標籤文章，都不會出現在隨機文章中。
M：此工具預設會出現在留言區塊之前。如果要擺到到別的位置，請將字串改為 "." + class 名、或是 "#" + id 名稱。
Q：由於過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者有空的時候，參考以上文章連結，自行將綠色字串的 js 檔分流。
想要先試玩一下效果，可在本站文章後面、留言區塊之前找到隨機文章區塊；或是也可前往前面提到的「範例網頁」測試。
更多實用工具：