^_^

2008年12月22日星期一

Blogger最新评论增强版

上次我们提到《为Blogger加最新评论的简要步骤》,但是这个功能是比较阳春的。

这次提到的方法来自《「最新回應」模組 (Recent Comments)》,有每页显示的数量可自定义、可以翻页、提供总数等功能。

方法与《为Blogger加最新评论的简要步骤》不同之处只在于不是添加“供稿”而是“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+'.  ';
  if (nIndex > nCommentStartIndex)
    sResult += '<a href="javascript:showRecentComments('+(nIndex-nCommentShow)+');" title="Newer Comments"><<</a>  ';
  if (bOld)
    sResult += '<a href="javascript:showRecentComments('+(nIndex+nCommentShow)+');" title="Older Comments">>></a>';
  sResult += '</p>'; 
  return sResult;
}
</script>

<script language="javascript">showRecentComments();</script>
其中加粗代码控制了第一评论和每页显示数量。
本站文章除注明外,均为本站原创
转载请注明文章转载自: 大笨熊乐园 [ https://blog.foolbear.com/ ]
文章标题: Blogger最新评论增强版
文章地址: https://blog.foolbear.com/2008/12/blogger_22.html

8 条评论 :

施meS 说...

谢谢。我也按照你给的代码用上来。

大笨熊 说...

这个code相当好用哦!

惢願 Wish 说...

用了很好,谢谢

大笨熊 说...

welcome,欢迎访问乐园。

匿名 说...

啊啊,这个东西强大啊...
我用上了..

大笨熊 说...

You welcome!

zp 说...

大笨熊,我用的是经典模板,想请教一下,怎样将评论用户名前的小圆点去掉,不然这个评论在页面上的显示效果是错位的。www.starzp.com

期待回信,谢谢~

大笨熊 说...

小圆点是由于<ul><li>造成的,自己移除就好了。

发表评论

Related Posts with Thumbnails