我的帝国,我做主! 我的帝国,我自由! 我的帝国,……

    在Blogger的侧边栏中增加最新评论

    | 2009-03-16

      我在很多博客中都看到了侧边栏显示最新的评论,我一直不知道是怎么弄的,我以为blogger就没有这个功能,但blogger之所以成为全球最大的博客群就是因为其开发性,只要是全开放的东西就没有什么是不能的。

      今日我在网上找到了这种方法,方法非常的简单,使用一个台湾的朋友提供的代码自动生成器就可以完成这个任务,其地址是“堯的自动生成器”不过,我发现这个网页已经非常的久了,不知道那天就没有了,我一直不太相信网络上的东西可以永远保持,所以,我把自己的代码保存了一份,可是我又非常希望和大家共享这段代码,这段代码是用我的博客为模板形成的,如何才能适合所有的朋友了,只有一个方法,就是研究出他的运行原理。尽管我没有学过其使用的javascript脚步语言,但毕竟是计算机应用技术专业毕业的,花了10分钟的时间读懂了一般内容,这其中就包括了各位朋友需要修改的部分。

      完整代码如下:(代码不算长,请不要晕,耐心看完,有好处。)


    <div id="newcommentsfutaogao">
     <h2>Loading...</h2>
    </div>

    <script>
    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;
    }

    function handleCommentsfutaogao(json) {
     var temp = '<h2>最新评论</h2><ul id="Feed001_feedItemListDisplay">';
     var postshow=5;
     var sortentry=json.feed.entry.sort(compareentry);
     for (var i=0, post; post = sortentry[i]; i++) {
      if(i>=postshow) break;
      var title=post.content.t;
      var link=post.link[0].href;
      var authorname=post.author[0].name.t;
      var timestamp=post.published.t.substr(0,10);
      temp += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a>-'+timestamp+'-'+authorname+'</span></li>';
     }

     temp+="</ul>";

     document.getElementById("newcommentsfutaogao").innerHTML = temp;

    }

    </script>

    <script src="http://futaogao.blogspot.com/feeds/comments/default?alt=json-in-script&callback=handleCommentsfutaogao" type="text/javascript"></script>


      我知道,一个帖子代码写的越多,读者就越少。-_- 但为了各位朋友能够更清楚的了解需要修改的部分,我只能贴出全部代码。

      首先下面这一部分就不要看了,我看不懂,如果你javascript学的不好,那你也不要看了。这一段无需修改。

    <div id="newcommentsfutaogao">
     <h2>Loading...</h2>
    </div>

    <script>
    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;
    }


      接下来请在代码的后面部分找到“最新评论”这4个字,这是侧边栏的标题,可以自由的修改,但只限于修改中文部分,不限字数,比如修改为“他们这么说我的帖子”。修改后的代码如下:

    var temp = '<h2>他们这么说我的帖子</h2><ul id="Feed001_feedItemListDisplay">';


      接下来要修改的部分是需要显示的评论条数:这里我选择的是最近的5条:代码如下:

    var postshow=5;

      如果你把上面的数字5,修改为10,则会显示最近的10条评论,我觉得5条比较合适。

      接下来需要修改的地方就比较特殊了,代码是下面这一部分:

    temp += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a>-'+timestamp+'-'+authorname+'</span></li>';

      这一段代码的作用是显示指定数目的评论,这一段原本是无需修改的,适用于所有的服务器,但我还是对其进行了必要的修改,这是一个非常细微上的东西,仔细看这一段代码就会发现,这不仅是显示了评论,还提供了一个链接,这个链接是什么呢?就是在显示评论的同时,如果读者点击相应的评论则会跳转到相关的网页,这本来是一个非常好的设计,如果是我来写代码,我也一定会设置这样一个功能,但在这里却会出问题,由于某些原因,虽然blogger在国内已解禁,但却只是部分的,有部分功能没有解禁(封禁功能?blogger的大部分服务器仍然是在国外,比如博客导入、导出功能、评论页面的存储。其链接直接指向了国外的服务器,这些服务器的IP仍然处于封禁状态)。这里单独显示评论页面功能就是处于封禁状态,如果访客点击了这些封禁的功能,那么这一个访客的IP就会被封禁,在2分钟内无法访问所有的blogger域名,如果访客受到这样的待遇那感受实在是太糟糕了,作为一个站长,应该充分的考虑网友的感受。所以我对此进行了一个修改,删除了链接功能,具体方法如下:

      删除<a href="'+link+'">'和</a>部分,请注意,不要删多了,一定要控制好。删除后的代码如下:

    temp += '<li><span class="item-title">'+ title +'-'+timestamp+'-'+authorname+'</span></li>';


      接下来要修改的部分就非常重要了,如果不修改,那这段代码完全没法运行。找到最后的这一段代码:

    <script src="http://futaogao.blogspot.com/feeds/comments/default?alt=json-in-script&callback=handleCommentsfutaogao" type="text/javascript"></script>

      仔细看这一段代码就会发现,这里是引用了一段网址,而这网址就是我的博客“帝国”的评论订阅供稿地址,如果你不修改这一部分,那么你得到的评论就是我这个博客的,而不是你自己的,所有这里需要把网址修改为你自己的,方法是把

    http://futaogao.blogspot.com/feeds/comments/default?alt=json-in-script&callback=handleCommentsfutaogao

    中的

    futaogao

      修改为你的博客域名,比如我的博客域名是http://futaogao.blogger.com 你可能需要修改为http://XXXXX.blogspot.com 。还需要注意的是这段代码的最后几个单词,也是同样的道理需要进行修改
    handleCommentsfutaogao 红色的部分。

      还有最后一个需要进行修改的地方,同样是这一段代码,请注意有一个单词default 。

    http://futaogao.blogspot.com/feeds/comments/default?alt=json-in-script&callback=handleCommentsfutaogao

      这个属性是设置显示评论的字数,有两个属性值,分别是短字数“default”,显示全部内容“full”,区别在哪里,我还真没有发现,自己看着办吧,

      当全部修改完后,就需要粘贴这段代码了,请到博客“控制台”的“布局”功能中启动“页面元素”页面,为博客添加一个小工具“HTML/JavaScript”,然后把代码粘贴进去,点保存,好了,大功完成。

      祝大家使用blogger愉快,有什么好的技巧一定要告诉我哦。

    4 评论:

    匿名 说...

    显示最近评论,的确是不错的功能,不过大部分时候没什么用

    Unknown 说...

    Blogger的评论显示不太好用,使用这一功能可以做出一点补偿。

    huary 说...
    此评论已被作者删除。
    Unknown 说...

    看一下模板中对对间距的设置

    发表评论

    您可以使用某些 HTML 标记,例如 <b>, <i>, <a>