Blogger.com博客优化之-显示最新文章

显示最新文章列表就是通过抓取Feed,依照格式制作成列表的形式,修改方法如下:
在布局里面添加HTML/JavaScript小工具,写入如下代码即可:
<div id="newPosts">
  <noscript>failed!
Javascript not supported here!</noscript>
</div>

<script>
var nPostStartIndex = 6;
var nPostShow = 10;

function showRecentPosts(nIndex) {
  if (!nIndex)
    nIndex = nPostStartIndex;
  var sFeedURL = '/feeds/posts/summary?orderby=published&start-index='+nIndex+'&max-results='+(nPostShow+1)+'&alt=json-in-script&callback=generatePosts';
  var script = document.createElement('script');
  document.getElementById('newPosts').innerHTML = 'Loading <blink>...</blink>';
  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 sHTML = '<ul>';
  var sortentry = json.feed.entry.sort(compareentry);
  var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
  var nTotalPost = parseInt(json.feed.openSearch$totalResults.$t);
  for (var i = 0, Post; Post = sortentry[i]; i++) {
    if (i >= nPostShow)
      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 timestamp=Post.published.$t.substr(0,10);
    sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
  }
  sHTML += '</ul>';
  sHTML += generatePostLink(parseInt(json.feed.entry.length), nIndex, nTotalPost);
  document.getElementById('newPosts').innerHTML = sHTML;
}

function generatePostLink(nFetch, nIndex, nTotalPost) {
  var bOld = (nFetch > nPostShow);
  if (bOld) nFetch = nPostShow;
  var sResult = '<p align="right">Recent '+nIndex+'-'+(nIndex+nFetch-1)+', total: '+nTotalPost+'.&nbsp;&nbsp;';
  if (nIndex > nPostStartIndex)
    sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts">&lt;&lt;</a>&nbsp;&nbsp;';
  if (bOld)
    sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">&gt;&gt;</a>';
  sResult += '</p>';
  return sResult;
}
</script>

<script language="javascript">showRecentPosts();</script>
保存以后就可以了,nPostStartIndex表示从第几篇文章开始显示,如果主页里显示了5篇文章,就没有必要重复显示了,直接从第六篇显示就可以了,nPostShow表示要显示多少文章,这些依据个人情况自己酌情更改即可。

原文地址:http://abintech.twidv.com/2008/01/blog-post.html (作者原文昨天没有打开,我以为作者博客关闭了,然后从Google cached里面看的内容,今天才知道地址被墙了。)

本文地址:http://oceanban.blogspot.com/2010/04/bloggercom_375.html
原创文章如转载,请注明链接: 转自OceanBan的空间

5 评论:

西楼 说... 回复此评论

这个方法实在是不好,速度慢不说,还老是无法显示。用Google reader直接输出多方便啊 呵呵

mifia Yang 说... 回复此评论

Google Reader只能显示5篇文章,失去意义了。这段代码不错,就是文章链接后边显示日期很不爽,想把日期去掉应该怎么做呢?

mifia 说... 回复此评论

还有啊,我这里博客归档如果以月归档,以树形显示是无法正常显示的,有办法解决吗?

Ocean Ban : 回复此评论

@mifia
去掉时间的代码:- '+timestamp+'
删除掉即可
博客归档进入修改勾选显示贴子标题

你有没有尝试不用代理访问你的博客,图片地址换下吧,都显示不出来,最后看看这个有没有兴趣:http://blog.kban.info/p/blogger.html

mifia Yang 说... 回复此评论

@Ocean Ban断开代理后是可以显示的啊,单位网通,家里电信都可以正常显示图片的啊,就是每次开博客非得刷新下才开,不然就总是打开中,头疼,你那里有遇到这问题吗?