「最新回應」模組 (Recent Comments)

「最新回應」模組 (Recent Comments)

剛剛翻了我自己的文章，發現我沒有寫過任何關於「最新回應」模組的文章，原因很簡單，我認為只要會搞「最新文章」模組的人，只要把自己文章的 RSS Feed 引用網址，改成文章回應的 Feed，最新文章當場就變成最新回應了。當然事情沒有想像中那麼單純，一方面最新文章想看到的和最新回應的內容會有些不一樣，像是最新文章只要列出時間、標題就好，但是最新回應要列出作者（回應者）、而 Blogger 單純的回應 Feed 裡面是沒有回應原文的標題 (Title 是部份的 Content)、單篇回應的連結多了「錨點」等等，加上，如果用我「最新文章」模組直接不改變數和函式名稱，想直接變成「最新回應」模組，又會有因為 Javascript 定義重複導致功能不正常的問題，好啦！那我直接改一篇最新回應的模組，有需要的就可以直接套用、不用再自己改了。

技術原理就和最新文章的一模一樣、透過 JSON 來抓 Feed 內容過濾排版成要呈現的樣子，大致版面（和能提供的資料）就這樣子，我也將能找出總數的方法一併套用，減少全域變數的使用，讓程式碼更加精簡（又少了十行吧～也併回頭去調整過「最新文章」的程式碼）。很抱歉，如果想顯示某回應原始的文章標題，光從 Blogger 提供的 Comment Feed 是找不到的，除非很麻煩地去一篇篇比對找出來，沒有更好的辦法前就先這樣囉！當然，之前提過 lvchen 的這篇文章 Recent Comment for Blogger 提供更棒更好的「最新回應」模組，也提供簡單安裝的懶人包，不介意用外掛 .js 或不想去搞程式碼的可以去使用，這應該是我目前看過最好最推薦的了。回到本題，如果還是想套用小弟的「最新回應」模組，動作依然是那幾個，首先，在範本、網頁元素裡加入一個新的網頁元素 (HTML/Javascript，或是直接編輯原有模組），塞入以下程式碼：

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

<script>
var nCommentStartIndex = 1;
var nCommentShow = 8;

function showRecentComments(nIndex) {
  if (!nIndex)
    nIndex = nCommentStartIndex;
  var sFeedURL = '/feeds/comments/summary?orderby=published&start-index='+nIndex+'&max-results='+(nCommentShow+1)+'&alt=json-in-script&callback=generateComments';
  var script = document.createElement('script');
  document.getElementById('newComments').innerHTML = 'Loading <blink>...</blink>';
  script.setAttribute('src', sFeedURL);
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

function generateComments(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 sHTML = '<ul>';
  var sortentry = json.feed.entry.sort(compareentry);
  var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
  var nTotalComment = parseInt(json.feed.openSearch$totalResults.$t);
  for (var i = 0, Comment; Comment = sortentry[i]; i++) {
    if (i >= nCommentShow)
      break;
    var authorname = Comment.author[0].name.$t;
    var title = Comment.title.$t.substr(0,30);
    var j = 0;
    while (j < Comment.link.length && Comment.link[j].rel != "alternate")
      j++;
    var link = Comment.link[j].href;
    var timestamp = Comment.published.$t.substr(0,10);
    sHTML += '<li><span class="item-title">'+authorname+': <a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
  }
  sHTML += '</ul>';
  sHTML += generateCommentLink(parseInt(json.feed.entry.length), nIndex, nTotalComment);
  document.getElementById('newComments').innerHTML = sHTML;
}

function generateCommentLink(nFetch, nIndex, nTotalComment) {
  var bOld = (nFetch > nCommentShow);
  if (bOld) nFetch = nCommentShow;
  var sResult = '<p align="right">Recent '+nIndex+'-'+(nIndex+nFetch-1)+', total: '+nTotalComment+'.&nbsp;&nbsp;';
  if (nIndex > nCommentStartIndex)
    sResult += '<a href="javascript:showRecentComments('+(nIndex-nCommentShow)+');" title="Newer Comments">&lt;&lt;</a>&nbsp;&nbsp;';
  if (bOld)
    sResult += '<a href="javascript:showRecentComments('+(nIndex+nCommentShow)+');" title="Older Comments">&gt;&gt;</a>';
  sResult += '</p>';
  return sResult;
}
</script>

<script language="javascript">showRecentComments();</script>

存檔搞定。同樣的，程式碼中紅色的那兩行一樣視個人狀況調整，我的範例是從最新的「第一個回應」、每一頁顯示「八篇回應」，如果要套用什麼其他文字、樣式或圖示，那就自己修改囉！

本文引自 http://abintech.twidv.com/2008/01/recent-comments.html