Blogger Hack: 最新文章 AJAX 縮圖版

最近讀到一篇關於Blogger的JSON中，如何截取出Media$thumbnail的文章，Media$thumbnail是Google自動針對網誌內的圖像所產生的72x72縮圖，利用這個JSON物件就有辦法做出帶縮圖的最新文章Widget，我把程式碼與Abin大大的最新文章模組「終極版」做了一個融合，就生出這套新插件可以給大家用啦。

使用教學：（我盡量簡單化安裝步驟，裝起來應該不會有太大難度）

• 到[設定]->[網站提供]->將文章資訊提供改為[完整]，否則本外掛會無法使用喔。
• 到[版面配置]->[網頁元素]->新增[HTML/JAVASCRIPT]元件。
• 在內容表格填上下列程式碼
  <style>
/* 最新文章 */
#RPosts ul{margin:0;padding:0;list-style:none;}
#RPosts li{display:block; margin:1px 0;height:52px;line-height:20px;padding:0 5px;border-bottom:1px dotted #ccc;}
.RP-title{font-size:13px;display:block; padding:5px 0 0;}
.RP-thumb{width:40px;height:40px;border:1px solid #ccc;padding:2px;margin:3px 8px 3px 0;float:left;}
#RP-nav{font-size:14px;margin-top:8px;text-align:center;}
</style>

<div id="RPosts"></div>

<script language="javascript">
var nPostStartIndex = 1;
var nPostShow = 5;
var noImage ="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

function showRecentPosts(nIndex) {
if (!nIndex)
nIndex = nPostStartIndex;
var sFeedURL = '/feeds/posts/full?orderby=published&start-index='+nIndex+'&max-results='+(nPostShow+1)+'&alt=json-in-script&callback=generatePosts';
var script = document.createElement('script');
document.getElementById('RPosts').innerHTML = '  Loading...';
script.setAttribute('src', sFeedURL);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

function generatePosts(json) {
function compareentry(a,b) {
order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
return 0-order;
}

var sortentry = json.feed.entry.sort(compareentry);
var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
var nTotalPost = parseInt(json.feed.openSearch$totalResults.$t);

var sHTML ='<ul>';

for (var i = 0, Post; Post = sortentry[i]; i++) {
if (i >= nPostShow)
break;
var title = Post.title.$t;
// Fetch thumb script by Aneesh of www.bloggerplugins.org
var thumb;
try{thumb = Post.media$thumbnail.url;
// If image source from flickr than use exsisting thumbnail
if(thumb.match("flickr")=="flickr")thumb=thumb.replace(/\_[stmo]\.jpg|\.jpg/,"_s.jpg");
}
catch (error){
s=Post.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumb=d;
// If image source from flickr than use exsisting thumbnail
if(thumb.match("flickr")=="flickr")thumb=thumb.replace(/\_[stmo]\.jpg|\.jpg/,"_s.jpg");
}
// No mediathumbnail and any image in the article
else thumb=noImage;
}
var j = 0;
while (j < Post.link.length && Post.link[j].rel != "alternate")
j++;
var link = Post.link[j].href;
sHTML += '<li><a href="'+link+'"><img class="RP-thumb" src="'+thumb+'" /><span class="RP-title">'+ title +'</span></a></li>';
}
sHTML += '</ul>' + generatePostLink(parseInt(json.feed.entry.length), nIndex, nTotalPost);
document.getElementById('RPosts').innerHTML = sHTML;
}

function generatePostLink(nFetch, nIndex, nTotalPost) {
var bOld = (nFetch > nPostShow);
if (bOld) nFetch = nPostShow;
var sResult ='<div id="RP-nav">';
if (nIndex > nPostStartIndex)
sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts">上一頁</a>  ';
sResult += '第'+nIndex+'-'+(nIndex+nFetch-1)+'篇, 共'+nTotalPost+'篇  ';
if (bOld)
sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">下一頁</a></div>';
return sResult;
}
</script>

<script language="javascript">showRecentPosts();</script>
<a style="clear:both;float:right;font-size:8px;color:#ccc;padding:2px;" href="http://blog.nightspirit.tw/2010/03/blogger-ajax.html">MOD BY NS</a>
• 開頭的STYLE為此元件的CSS，可以自行針對版面做客製化。
  #RPosts li - 此li元件為每一列圖片加標題的外框，我預設52px高，有加下底線，可以透過設定margin調整項與項的間距，透過padding決定內容與外框的間隔。
  .RP-title - 標題的span元件，可以透過font-size來改大小，padding來決定與頂端的間隔。
  .RP-thumb - 縮圖的img元件，可以透過width、height來調整縮圖大小，margin-right來決定與標題文字的間隔。
  #RP-nav - 底下的訊息列與上下頁籤，是一個div物件，基本上就隨你喜歡來操作囉。
• var nPostStartIndex = 1; 此參數決定你要從第幾頁開始。
• var nPostShow = 5; 此參數決定每頁entry的個數，建議這個不要設太高，畢竟讀取太多縮圖會花較長時間。
• 對JS熟習者，上下頁或特定字詞可以在內碼中找到並自行替換，元件結構也可以透過填入SHTML的順序來加以變動。
• 為了推廣此套件NS有在底下放了一個MOD BY NS的小連結，如果覺得這外掛好用的話請不要把他拿掉，如果真的覺得礙眼的話，請用CSS #RP-link{display:none;}，謝謝您的支持 :)

套件特點：

縮圖第一步是先找有沒有對應的media$thumbnail，沒有則會去搜尋內文中的圖片。

這邊有加入flickr的檢查機制，如果你是用flickr當圖床，程式會自動把URL轉成flickr縮圖的位置來加速讀取時間（3/14更新，我把replace那邊換成通用的正規式，因此不論用_s,_t,_m,_o或無印應該都會轉成_s.jpg）

若是用其他圖床恐怕就必須載入原圖並因為強制縮為正方形而造成部份失真。至於什麼圖都沒找到的情況之下會填入一張無縮圖的圖像，各位可以自行把程式碼中var noImage=""的字串換成你想要的圖片URL。

2010-11-30更新
由於blogger feed的media$thumbnail有時會抓到flickr的_t.jpg縮圖，所以需將檢查機制同時加入try()跟catch(error)裡，程式碼部份已修正，請直接換用新程式碼。

延伸閱讀：

1. Related Posts Widget for Blogger with Thumbnails - 我從這篇學到怎麼去抓thumbnail，或者從內文中找到圖片。
2. 最新文章模組「終極版」 - 模組原型是取自於Abin大大這篇。

常見問答：

Q. 跳頁功能無法使用？

A. 主因是本外掛改自Abin大大的最新回應終極版，在做的時候並沒有把原來的更新Function改名，造成兩個外掛無法共容，最快的辦法是擇一使用之，不然就是要把我程式碼中showRecentPosts用別的字串來取代...

Q. list-style就算設成了none也無法把清單bullets移除？

A. 很多template是利用background來做清單的bullets，所以只要在#RPosts li裡加入background:none;的屬性即可把bullets移除。

最後希望大家都能快樂的hacking blogger，有問題的同學請在下面發問，洩洩！

2011/1/31 NS已推出JQuery為主的新版插件，歡迎試用。
Blogger RecentPosts 最新文章插件 V1.0.0