2015年3月17日

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

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


更多實用工具:

33 則留言:

  1. 滑鼠靠近時的效果還不賴耶^^

    回覆刪除
    回覆
    1. 為了跟相關文章區隔,得做個不一樣的效果 :D

      刪除
  2. 請問我無法顯示出文章是什麼問題@@?? 但有出現隨機文章推薦 的字出現

    回覆刪除
    回覆
    1. 謝謝您的回覆,麻煩幫我看一下 謝謝
      http://iove1014001.blogspot.tw/2015/04/05.html

      刪除
    2. 你的文章好像都沒設定標籤?你先設定標籤試試看,因為這個工具會檢查需要排除的標籤,但你的網站沒有任何標籤,可能讓程式當掉了。

      刪除
    3. 您好:確認是標籤問題 謝謝

      刪除
  3. 隨機文章的效果很不錯,還能增加blogger的點閱量。

    回覆刪除
    回覆
    1. 拜訪您的網域 http://giftcard.ga/ 卻一直連不上呢?

      刪除
  4. 請問我也有出現 隨機文章推薦 的字樣,但卻沒有文章顯示,請問是甚麼樣的問題呢?
    這是我的測試用的網站 請麻煩幫我看一下 謝謝!!
    http://txxese.blogspot.tw/

    回覆刪除
    回覆
    1. 匿名 + 測試用網站 + js 沒分流 → 麻煩用您的主要網站測試,有問題再來提問。

      刪除
    2. 請問js沒分流的意思是? 我是blogger的新手
      這個是這個網站是別人有問題而複製過來的 這就是我的主要網站
      不知道能否解說一下呢? 感謝!麻煩!

      刪除
    3. 麻煩詳讀文章內容,分流的意思與操作都說明得很清楚。

      刪除
  5. 我之前按照這篇教學做,有成功show出來。但後來不知道為什麼又沒有顯示了。可以幫我看一下嗎? http://buxguo.blogspot.tw/ 謝謝!

    回覆刪除
    回覆
    1. 你沒有將 js 分流對吧,你可以看一下前幾樓的狀況,然後按文章說明將 js 分流。

      刪除
  6. WFU大您真的是太神了! 安裝後的效果很好,特別來向您致謝!

    PS: 費了一番功夫才發現分流的js檔 (google drive)連結要刪掉前面一串亂碼..

    回覆刪除
    回覆
    1. hi, long time no see~

      你的 js 檔連結是如何取得的呢?如果用「Google Drive 外連產生器 V2」應該很容易才是 ^^

      刪除
    2. 我是用您提供的外連產生器,不過產生出來的連結不像您的那麼簡潔,而是有兩串亂碼,我嘗試刪除前面那一串,居然就成功了 呵呵~ 真是歪打正著!

      刪除
    3. 請問你用新版 Google Drive 還是舊版?瀏覽器版本為何?還有產生的亂碼連結範例?想要看看是什麼問題~~ ^^

      刪除
    4. 我是用新版Google Drive,所以用的是您的V2版。產生的連結如下:https://googledrive.com/host/0B7u5XmNPDHt7YjBmOTk0YWEtNjY3Ni00N2E2LTgzN2UtYmI0MjNmYmQ0YmIz/0B7u5XmNPDHt7U3hJNWxZVkRrb0U/0B7u5XmNPDHt7flNEM2NGbEh2NjJrU09TUGdET0FRbVgzZXItb2hyZUw2Zl9IVUtXdWlJYlk/rndPost-min-150506.js

      (真的很長)...不過我今天試產生的亂碼和昨天不一樣,怎麼改都不能用了@@昨天歪打正著拿到的連結倒還是可以..(連結:https://googledrive.com/host/0B7u5XmNPDHt7flNEM2NGbEh2NjJrU09TUGdET0FRbVgzZXItb2hyZUw2Zl9IVUtXdWlJYlk/rndPost-min-150506.js)


      用的是chrome 43.0.2357.65 m

      刪除
    5. 謝謝您的回報,我做了一些測試,由於這主題跟外連產生器比較相關,已將以上對答內容複製到該篇文章,再麻煩移駕到「Google Drive 外連產生器 V2」繼續後續吧~ ^^

      刪除
  7. 之前用LinkWithin一直有縮圖無法出現,看了您的文章終於解決了推薦文章功能的問題!! 超棒的!!
    但是小弟遇到了另一個問題,就是blog的標頭消失了。@@
    方便請您幫忙看一下嗎? http://buxguo.blogspot.tw/
    感謝~ ^^

    回覆刪除
    回覆
    1. 不好意思 網址是http://gomiller.blogspot.tw/ 按太快不小心按到發佈。

      刪除
    2. hi miller, 看了一下你的網站,從網頁原始碼沒有看到標頭的內容,因此你要到後台 → 版面配置,自行檢查是否標頭區塊被你刪除、或是被拖曳到別的地方、或是沒有設定內容?

      BTW, 標頭的問題似乎與這個隨機文章無關?建議在相關文章提問,其他讀者就可參考類似問題,或是看下方的留言注意事項,在留言板提問。

      刪除
  8. 安装成功,效果很好!谢谢分享!

    回覆刪除
    回覆
    1. hi shouping, 看了你的安裝效果,發現很多文章無法顯示縮圖 → 才發現這篇的說明忘了提 PICASA 圖床的事 → 已把這個注意事項補充到「四、常見 FAQ」→ Q1 了

      刪除
    2. 谢谢!我也注意到了,谢谢提示!

      刪除
  9. 之前曾經成功用過,
    後來因為大概因為流量限制的關係就失效了。

    應該也有很多像我這樣的技術弱手遇到類似的問題吧?
    "本來可以用後來卻突然不能用的"這種狀況,請檢查範本html中
    【jQuery.getScript("https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/rndPost-min-150506.js");】這行最後的js檔名是不是150506,
    調整之後應該就會正常了。

    非常感謝WFU的研究、分享與熱心教學,真的獲益良多!

    回覆刪除
    回覆
    1. 補充說明一下:但還是請大家分流JS,除了比較穩定之外也不會造成wfu大的負擔XD

      刪除
    2. 不客氣~
      是的,js 分流一開始需要花一點功夫,不過做習慣就很快了 :)

      刪除
  10. 你好,我跟足以上的步驟去做了,看過其他人的問題我都好像沒有類似錯誤,不過連推薦文章的字都沒有顯示到,請問是出了什麼問題呢?謝謝!

    回覆刪除
    回覆
    1. 我剛剛看了v2懶人包之後又成功show到圖片了,不過“相關文章推薦 :”的字太貼上一行字,如何可以改成分開一點?如果想要放到作者名字之前應該如何修改".post-footer-line-3"?
      非常感謝WFU!!!

      刪除
    2. 你好,
      1. 提問時請附上出問題的網址,才能知道是什麼情形
      2. 看起來你已經改安裝「相關文章v2」? 如果是的話,請在那篇文章留言,一樣請記得附網址

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。