-->

2013年1月23日星期三

自定义评论系统之定位篇

Blogger自带的评论系统不太友好,其他给Blogger用的第三方评论系统在国内也很不稳定。修改博客的评论系统迫在眉睫,国内有好多很好的第三方社会化评论系统,比如多说友言贝米评论啦灯鹭。我现在的评论系统就是采用的多说,基本上符合常见的评论风格了吧,首页显示评论数,单页显示所有评论。

先定位原先的评论,这是第一步。为了找到哪儿是评论,先要打开评论(废话!)。到管理后台的Settings - Posts and comments,将Comment Location修改为Embeded,其他的选项也可。

定位工作我用的工具是firefox + firebug,chrome更方便,直接审查页面元素即可。打开自己的博客,找两个地方,一是首页显示评论数的地方,另一个是单页显示所有评论以及评论框的地方。重要的是看,这些地方位于哪个div里?这个div的id和class分别是什么。我的是<span class="post-comment-link">以及<div id="comments" class="comments">。

返回博客后台的Template,点击Edit HTML按钮,在弹出的窗口中选中Expand Widget Templates,然后查找class='post-comment-link'以及class='comments',此处为单引号。

你可能找到多个,这是正常的。比如class='comments'就有多个:

<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>threaded_comments评论
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>
或者
<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>comments评论
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4><data:post.commentLabelFull/>:</h4>
如果前面的Comment Location设置为Embeded的话,就定位到上面这段代码;如果Comment Location设置为Full page或者Popup windows的话,就定位到后面这段代码。class='post-comment-link'也有多个,这时候上下翻翻代码,如果看到mobile字样在附近的话,那说明是给手机浏览时候用的代码。

不要动这些代码,只在找到的地方随便增加几个字如“这里是评论数”、“这里有所有评论”,如果不太确定代码的位置,试着添加不同的字段,点Save Template保存后,打开新页面看看是不是自己的博客的评论处多了这些字?

恭喜你,找对位置了。接下来就是把多说的评论系统拿过来,我们最后再去除自带的评论。