2015年3月1日 星期日

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

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

Wayne Fu 0 A+
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 後台上傳圖片,放在文章最前面的位置,就一定能顯示縮圖了。


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

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP