應用 JSON 實現「最新文章」、「最新回應」和「Blog 聯播」

之前在Blogger Buzz(Blogger.com的 Blog)，看到一篇消息說 Blogger 支援 JSON，說實話我不知道那是啥（JSON = JavaScript Object Notation, 讓跨網站也可以讀取到的資料結構?!），不過有人實作出一些東西來，就知道這玩意的厲害了。

之前自己這篇提到如何利用 Feed 在 Blogger 裡加入最新文章和回應，但使用上有些限制，像是篇數（只允許五篇）還有格式內容，更新好像也不夠快，從小帽的 Blog 看到有堯利用 JSON 做出最新文章和回應的 Javascript，還可以做 Blog 聯播或是特定標籤的 Feed，這實在是太厲害了，因此參考兩位的文章也做出屬於自己的 Javascript，用來顯示最新回應、最新文章和 Blog 聯播。使用方法很簡單，只要在 Sidebar 的網頁元素(Page Elements)裡新增 HTML/JavaScript 程式碼，依自己的需求分別加入下面的元件，貼入程式碼就好了（紅色部分的程式碼要依個人設定和需求去更改，像有一行數字等於 10 代表的意思是要顯示十篇，另一個 temp 那行是表示顯示的內容和格式，可以自行修改）。

最新回應 (Recent Comments)：

<div id="newComments">
  Loading...
  <noscript>failed!<br/>Javascript not supported here!</noscript>
</div>

<script>
function handleComments(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 temp = '<ul>';
  var CommentShow = 10;
  var sortentry = json.feed.entry.sort(compareentry);
  for (var i=0, Comment; Comment = sortentry[i]; i++) {
    if (i >= CommentShow)
      break;
    var title=Comment.content.$t.substr(0,30);
    title=title.replace(new RegExp("BR","gm"), "");
    title=title.replace(new RegExp("</>","gm"), " ");
    var link=Comment.link[0].href.replace("#", "#comment-");
    var authorname=Comment.author[0].name.$t;
    var timestamp=Comment.published.$t.substr(0,10);
    temp += '<li><span class="item-title">'+authorname+': <a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
  }
  temp+="</ul>";
  document.getElementById("newComments").innerHTML = temp;
}
</script>

<script src="/feeds/comments/default?alt=json-in-script&callback=handleComments" type="text/javascript"/></script>

至於最新文章 (Recent Posts) 的部分，同樣是用上面那段程式碼，有小地方部分要修改，Feed 的網址也要改：

<div id="newPosts">
  Loading...
  <noscript>failed!<br/>Javascript not supported here!</noscript>
</div>

<script>
function handlePosts(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 temp = '<ul>';
  var PostShow = 10;
  var sortentry = json.feed.entry.sort(compareentry);
  for (var i=0, Post; Post = sortentry[i]; i++) {
    if (i >= PostShow)
      break;
    var title=Post.title.$t;
    var j=0;
    while (j < Post.link.length && Post.link[j].rel != "alternate")
      j++;
    var link=Post.link[j].href;
    var authorname=Post.author[0].name.$t;
    var timestamp=Post.published.$t.substr(0,10);
    temp += '<li><span class="item-title">'+authorname+': <a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
  }
  temp+="</ul>";
  document.getElementById("newPosts").innerHTML = temp;
}
</script>

<script src="/feeds/posts/default?alt=json-in-script&callback=handlePosts" type="text/javascript">

不過如果是用來顯示自己 Blog 的最新文章，作者也只有自己一個人，那麼 authorname 的欄位也可以自己選擇要不要拿掉。

最後是所謂的 Blog 聯播 (Blogrolls)。說穿了，其實聯播就是在自己的 Blog 首頁顯示別人 Blog 的文章，訂閱別人的 Feed URL，只要改「最新文章」的倒數第二行，把 Blog Feed 網址改成對方的就行了。所以有了這招，可以取代掉 Blogger 本來內建的 Feed 模組（因為該模組限制訂閱五篇，又限制顯示的格式）。

另外，上面提到的都是處理整個 Blog 最新文章的 Feed，如果想要訂閱的是某分類標籤的所有文章，那麼該如何處置？一樣，只要在訂閱的 Feed URL 動手腳就行了，改成下面這樣：

<script src="http://聯播或你的Blog網址/feeds/posts/summary/-/標籤名稱/?alt=json-in- script&callback=handlePosts" type="text/javascript"></script>

作者有提到一個標籤加上 Feed 的妙用：將你要推薦、頂置或公告的文章都加上一個特定標籤，然後訂閱這個標籤的 Feed 顯示在 Blog 的元件裡，這樣你在首頁就可以有動態的頂置或是公告區囉！如果嫌上面的程式還要修改很麻煩，可以用原作者自己寫的「程式產生器」來產生自己的程式碼，以上的程式產生器請參閱參考文章裡的連結。

參考文章：
小帽：Blogger 聯播程式產生器 - 增加「最新文章與最新回應」與「標籤訂閱」程式產生器
堯：Blogger(Beta) 最新回應程式產生器
Blogger聯播程式產生器(PartII)
Blogger(Beta)最新文章與最新回應JavaScript Code Part II

[注意]：
在回答網友問題的過程中發現，以上實現「最新文章」和「最新回應」的方法，如果同時使用（就是裝兩個以上），當瀏覽器是 IE 的時候，因為裡面有兩套相同的 Javascript 原始碼，內容會錯亂導致只有一個內容出得來（Firefox 正常）。請記得更改裡面的一些定義（像是把 "newComments" 字串在不同模組裡用不同的名稱），或是把 Javascript 的函式統一搬到範本裡面，每個 Element 負責用不同的 Feed URL 呼叫它就行了，如果直接用我範例的程式碼直接貼多個模組出來，IE 是可能會錯亂的喔！

[8/28 更新]：
由於 Blogger 更改了回應 的 RSS Comment Feed 的格式，本來 Feed 裡 Title 欄位有資料，是部分的 Comment 文字，更改之後 Title 欄位是空白的，會導致拿 Feed 來做「最新回應」模組時回應內容不見。因此，「最新文章」可以抓 title 當標題，而「最新回應」就要抓內容 content 的部分字串來用（還要修正 link、取代不必要的換行符號）。