2012年9月5日

博客评论功能升级(引入 BBCode 语法),顺便分享一下实现方法

★广而告之


  最近一年来,翻墙到俺博客留言的读者日渐增多。留言多了之后, Blogger / BlogSpot 平台的评论功能就越发显得老土了。这个周末,俺痛下决心,把默认的评论功能彻底改造一下。这番改造,主要增加了如下几个功能:
1. 增加嵌套评论的功能
通过嵌套评论,直接回复前几楼的留言就方便了。
由于 Blogger / BlogSpot 平台在功能上仅支持两层嵌套。所以,目前俺还搞不出多层嵌套。

2. 增加楼层数的显示
类似 BBS 论坛的效果(目前不支持 IE 8 之前的版本)。

3. 增加评论者的头像
如果登录过 Gmail 或 OpenID,会显示用户的头像。对于匿名用户,显示默认头像。

4. 评论支持 BBCode 语法
可以在评论中使用常见的几种 BBCode 语法,目前支持如下4种:
超链接[url]网址[/url]
带标题的超链接 [url=网址]标题[/url]
图片[img]图片的网址[/img]
粗体文字[b]加粗的文字[/b]
关于 BBCode 的更多介绍,请看"这里"。

5. 调整了背景颜色和边框
主要是为了看起来爽一点。

  针对上述新功能,欢迎大伙儿多提意见和建议,便于俺改进(点"这里"发表你的高见)。
  下面是改造后的评论功能截图,如果你的浏览器看到的效果有差异,敬请告知你的浏览器版本。

不见图 请翻墙

  接下来,俺分享一下具体的实现方式,希望对其他 Blogger / BlogSpot 上的博主有帮助。如果你没有在 Blogger / BlogSpot 上开博客,那后面的内容就无需再看了。

================华丽的分割线================

★如何实现"嵌套评论"?


简介:
嵌套评论功能由于涉及到后端,需要 Blogger / BlogSpot 平台的支持才有可能实现。幸运的是,Blogger / BlogSpot 平台在今年开始提供"嵌套评论"的功能。
由于平台提供支持,只需要简单修改一下模板即可实现。

步骤:
首先,进入 Blogger 的后台管理界面,点左边菜单上的 "模板" 按钮。
出现模板管理界面后,再点 "修改HTML" 按钮。
出现一个对话框,点 "继续" 按钮。
然后勾选 "扩展窗口小部件模板 "。
此时,你就可以看到模板的编辑界面了。
为了保险起见,在编辑之前先备份一下模板。

在模板中找到如下代码:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>
</b:if>

修改为如下:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
  <b:else/>
    <b:include data='post' name='comments'/>
  </b:if>
</b:if>

最后点 "保存" 按钮。
如果不出意外,你的博客就有嵌套评论功能了。

★如何添加楼层数?


添加评论的楼层数,有很多种方法。比较简单的有如下两种。

◇使用 JavaScript 显示楼层号


简介:
直接在模板中嵌入 JS 代码。利用模板中的 loop 循环,递增楼层号并显示。

优点:
支持各种浏览器

缺点,
适合用于传统的评论界面。对于新的嵌套评论界面,需要对模板进行大改,比较难搞。

步骤:
根据刚才介绍过的步骤,进入模板编辑界面。
为了保险起见,在编辑之前先备份一下模板。

在模板中找到如下代码:
<b:loop values='data:post.comments' var='comment'>

修改为如下:
<script type='text/javascript'>nCommentIndex = 1;</script>
<b:loop values='data:post.comments' var='comment'>
  <span class='comment-index'>
    <script type='text/javascript'>document.write('第'+nCommentIndex+'楼'); nCommentIndex+=1;</script>
  </span>

最后点 "保存" 按钮。
如果你想调整楼层号的显示样式,可以在模板的 CSS 代码尾部追加如下代码:
(请根据自己的喜好修改下划线部分)
.comment-index {
  float: 浮动靠左还是靠右;
  font: 用啥字体;
  font-size: 字体大小;
  color: 用啥颜色;
}

全部修改完之后,点 "保存" 按钮。

◇使用 CSS 显示楼层号


简介:
利用 CSS 的计数器功能,实现楼层号的递增及显示。

优点:
支持嵌套评论的界面

缺点:
浏览器兼容性不够好(比如 IE6 不支持 CSS 的 content 属性)

步骤:
根据刚才介绍过的步骤,进入模板编辑界面。
为了保险起见,在编辑之前先备份一下模板。

在模板代码中,找到 CSS 的那段代码,然后在 CSS 代码的尾部追加如下代码:
(以下这2段代码就是俺博客用的,欢迎剽窃)

这一段用来显示楼层号
.comment-thread ol {
  counter-reset: comment_counter;
}
.comment-thread li:before {
  content: counter(comment_counter,decimal) "楼";
  counter-increment: comment_counter;
  float: right;
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 120%;
  color: $mainLinkColor;
  border: none;
  margin-top: 10px;
  margin-right: 10px;
}

这一段用来显示嵌套在某楼层之下的单元号
.comment-thread ol ol {
  counter-reset: child_comment_counter;
}
.comment-thread li li:before {
  content: counter(comment_counter,decimal) "楼 " counter(child_comment_counter,decimal) "单元";
  counter-increment: child_comment_counter;
  font-size: 100%;
}

修改完之后,点 "保存" 按钮。

★如何添加头像?


根据刚才介绍过的步骤,进入模板编辑界面。
为了保险起见,在编辑之前先备份一下模板。

在模板中找到如下代码:
<dl id='comments-block'>

修改为如下:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

还没完,就在这行代码下方2-3行的地方有如下代码:
<a expr:name='data:comment.anchorName'/>

修改为如下:
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
  <div expr:class='data:comment.avatarContainerClass'>
    <data:comment.authorAvatarImage/>
  </div>
</b:if>

如果你想调整头像的显示尺寸,可以在模板的 CSS 代码尾部追加如下代码:
(请根据自己的喜好修改下划线部分)
.comments .avatar-image-container img {
  width: 图像宽度;
  height: 图像高度;
  border: 图像边界;
}

修改完之后,点 "保存" 按钮。

★结尾


  今天就先介绍到这里。以后如果有空,俺还会继续改进本博客的评论功能。相关的代码也会继续补充到本文中。欢迎其它博主到本文留言,交流经验。

俺博客上,和本文相关的帖子(需翻墙)
博客评论功能升级(智能贴图、图片代理)——兼谈“Web 图片的隐私问题及防范”
博客评论功能升级(“未读”状态、按时间过滤)——兼谈“为啥俺不用其它博客平台”
博客评论功能升级(增加“留言过滤”、“200条之后自动加载”等)

82 条评论:

  1. 回复
    1. 借沙发的位置,Demo 一下评论的 BBCode 功能

      语法:
      [url]网址[/url]
      效果:
      [url]http://program-think.blogspot.com/[/url]

      语法:
      [url=网址]标题[/url]
      效果:
      [url=http://program-think.blogspot.com/]编程随想的博客[/url]

      语法:
      [img]图片的网址[/img]
      效果:
      [img]http://lh4.googleusercontent.com/-Wxl9HaDj1-I/SYPJWMNM65I/AAAAAAAAAcc/FjINutqB9_I/ThinkerSmall.jpg[/img]

      删除
    2. 怎么弄上的图片?

      删除
    3. TO 楼上
      相关的语法,俺不是已经写在上面了嘛。
      你也可以自己嵌一张图片在评论里面。

      删除
    4. 试一下下哟:
      [img]http://www.dydsc.cn/ForWebV6/uploadfile/201006/20100608151830252.jpg[/img]

      删除
    5. 木想到这么大的图,不好意思了 :-)

      删除
    6. [img]http://news.ifeng.com/photo/hdnews/detail_2012_09/06/17408705_0.shtml#p=4[/img]

      删除
    7. test BBcode
      [img]http://images2.china.com/travel/zh_cn/newlvyou/hknews/11072946/20120215/r_2012021509255982270300.jpg[/img]

      删除
  2. 每天告诉自己
    中共狗官其实都是衣冠禽兽的土匪
    愤怒的情绪就不会那么强烈了

    回复删除
    回复
    1. 某人无故打你一耳光,你很愤怒,
      如果你知道这个打人者确实是个精神病患者“武疯子”,
      那么你对这个打人者就不会那么愤怒,甚至还可怜那个精神病患者,
      共匪是罪犯,共匪也是病人,所以,我们应该可怜那些共匪,
      这个绝不是阿Q精神。

      删除
    2. 博客的评论功能,很好用

      删除
  3. 王立军被公诉了,楼主的八卦文还有下文吗?

    回复删除
    回复
    1. 最近,王立军、谷开来都被审了。
      不过这几个人都不是重点。关键看对薄熙来本人会如何处理?
      在18大召开前,高层的排排坐貌似依然有一些变数。
      因此,对平西王的处理,也会有变数。
      等朝廷宣布对薄熙来的处理意见,俺再发一篇八卦文。

      删除
    2. 一两年前,我对重庆的唱红打黑还有点好感,我又上当了,共匪里面的人才也多啊。
      其实随便哪里的共匪都一样黑啊,
      表面好看的地方,更黑,欺骗性更强。中共狗官都是衣冠禽兽的土匪。

      删除
    3. TO 2单元的网友
      勃起来在西红市搞“唱红打黑”,迷惑了很多人。

      “唱红”
      忽悠了很多怀念毛时代的社会底层民众。

      “打黑”
      则更加具有欺骗性。王立军出事后,“打黑”的内幕已经逐渐曝光——其实质是“黑打”。
      通过捏造罪名,把当地企业家抓起来,屈打成招。
      然后没收企业家的资产,表面上充公,其实捏?落入了某人的腰包。
      一个直辖市,居然能破获成千上万的黑社会组织——里面不知道有多少冤案。

      删除
    4. 习近平取消会见希拉蕊,网上有的说习近平这人靠不住,有的说是背受了伤,18分脏大会前迷雾重重啊!

      删除
    5. 背受了伤未见得是真的,说不准是什么疾病,其实D的干部很 操 劳。不过你看他在墨西哥的讲话:“有些吃饱了没事干的外国人,对我们的事情指手画脚。中国一不输出革命,二不输出饥饿和贫困,三不去折腾你们,还有什么好说的。” 可见共匪都是一丘之貉。

      删除
    6. TO 4单元
      话说18大临近,这是10年一次的高层权力转移,变数很多滴。
      “习近平受伤”这事儿,估计有看头。

      删除
    7. TO 5单元
      目前还难以判断“背部受伤”是属实。
      但一定是有重大的突发事件,才使得习近平取消跟希拉里的会晤(希拉里属于外长级别的到访,规格很高的)。
      所以俺觉得此事有看头。

      删除
  4. 此评论已被作者删除。

    回复删除
  5. 俺现在 在国外,上网很方便,但不知道怎样才能帮国内的朋友翻墙?

    回复删除
    回复
    1. 有没渠道提供肉体翻墙 ?

      删除
    2. TO paulus
      如果你用的宽带给力,可以搭建一个 TOR 中继,方便翻墙的用户。
      至于如何配置,请看 [url=https://www.torproject.org/docs/tor-doc-relay.html.en]TOR 官网的配置说明文档[/url]

      删除
  6. 中国经济面临崩溃 左派试图军管清洗右派http://cn.epochtimes.com/gb/12/9/6/n3676143.htm%E4%B8%AD%E5%9B%BD%E7%BB%8F%E6%B5%8E%E9%9D%A2%E4%B8%B4%E5%B4%A9%E6%BA%83-%E5%B7%A6%E6%B4%BE%E8%AF%95%E5%9B%BE%E5%86%9B%E7%AE%A1%E6%B8%85%E6%B4%97%E5%8F%B3%E6%B4%BE

    回复删除
  7. 习近平受伤这事很诡异啊,博主有没有什么消息?

    回复删除
    回复
    1. 俺也是刚刚知道。

      话说18大临近,这是10年一次的高层权力转移,变数很多滴。
      今年以来,朝廷已经推出了不少精彩的宫廷戏(还是真人版)。
      “习近平受伤”这事儿,估计有看头。

      删除
  8. 这不能多层嵌套,回复回复单元里的还是跟一起一样了,打起仗来不好看的。

    回复删除
    回复
    1. TO john Lewis
      你看,俺这不是嵌套回复了嘛

      删除
    2. john Lewis要的是 _多层_ 嵌套,现在只有2层回复,比以前1层进步,但未达到树状分支的多层嵌套 这个目标

      删除
    3. TO 楼上
      由于 Blogger / BlogSpot 平台在功能上仅支持两层嵌套。所以,目前俺还搞不出多层嵌套。
      俺已经在博文中补充说明了,目前只支持两层嵌套。

      删除
    4. TO john Lewis
      抱歉,理解错你的意思了 :(

      删除
    5. 原来有邮件回复提醒,以前一直不知道怎么看回复,一直不太会用,g+关注十几个人翻页比微薄还累。

      删除
    6. TO john Lewis
      不但可以在 Gmail 里面看 G+ 的评论,还可以在 Gmail 里发评论。

      删除
  9. 不错,这是一个无聊铁

    回复删除
  10. 中档爱锅 怎么还没来?又在家看新闻联播?

    回复删除
    回复
    1. TO 小钻风
      据俺观察,忠党爱国同学对纯技术的博文不感兴趣的。

      删除
  11. 使用一下先

    回复删除
  12. 用了goagent,大家都说好.

    回复删除
    回复
    1. 为什么我的老出问题,GOAGENT 1.10.0 稳定版 goagent 2.0.5 版本都用了,每次翻墙10分钟,CHROME必会重启,看GOAGEN报错一大堆(其本上是对域名的解析错误)

      删除
  13. 编程兄,我们是不是应该表达下对港人抗争洗脑教育的支持啊?都是同胞,他们的行动肯定对我们以后的民主实践有很好的示范和启迪效果,是否考虑整理一篇博文,我们再在墙内转发,让更多地内地民众了解事实真相,为港人的抗议行动援手出力呢?

    回复删除
    回复
    1. TO 沦陷区居民
      俺也在考虑这事儿。
      一方面要对香港同胞表示声援,另一方面要继续揭露朝天的洗脑教育。

      删除
  14. 不需要多层,QQ,百度都是两层自有它的道理,层次太多会有新的问题.完全可以复制百度贴吧的实现方式.

    回复删除
  15. 半年前偶尔发现博主的博客(当时正四处找爬墙术),受博主指引现已掌握了几种爬墙工具,更重要的是识破了中共的嘴脸,当官的都是道貌岸然,其实暗地里吃喝嫖赌、贪污受贿。。。稍有生活经验的人都知道现在办事都要请客送礼。。。

    悲哀的是,潜规则横行成了一种体制常见现象,奉行“明规则”,往往寸步难行,对比世界主流国家,说中×共是邪恶的体制一点也不为过!

    象王力军和勃起来事件,中共都是暗箱操作,视法律为无物,为什么没有新闻法呢?因为有了新闻法,真理部就不能随心所欲封杀某些丑闻了。喊了多少年的官员财产公开就是不见动静,言论自由、人权、司法公正什么时候能真正实现呢?
    一个独裁的党和政府把中国带向何方?
    希望国人都能看透中×共的本质,希望非暴力革命能够行的通。。。

    回复删除
  16. 汪洋率团赴延安学习考察 向毛泽东铜像献花篮
    http://news.ifeng.com/mainland/detail_2012_09/05/17358873_0.shtml

    莫名其妙啊!

    回复删除
    回复
    1. [img]http://news.ifeng.com/photo/hdnews/detail_2012_09/06/17408705_0.shtml#p=1[/img]

      删除
    2. [img]http://y0.ifengimg.com/news_spider/dci_2012/09/e03c17b5fcf16cf02420c30e3dee51fd.jpg[/img]

      删除
    3. 有的网址咋不显示图片?

      删除
    4. 1单元的那个网址,其实不是图片的网址,而是网页的网址。
      所以图片显示不出来。

      俺刚才完善了一下:
      对于无法显示的图片地址,会给出一个提示。

      删除
  17. 试试楼主的新回复
    [img]http://ww3.sinaimg.cn/bmiddle/70166f5djw1dwnogpao3nj.jpg[/img]

    回复删除
  18. 哈哈,不得不出来给楼主顶顶新评论,好看多啦

    回复删除
  19. 候补常委汪洋先森去延安朝拜太祖了,这是唱的哪一出戏啊,这宫廷大戏怎么有点看不懂了啊?博主。

    回复删除
    回复
    1. 这说明 汪洋极有可能入常

      删除
    2. 关于汪洋的仕途,到目前为止,各种说法都有。
      鉴于目前高层斗争激烈,俺觉得:在18大正式召开之前,可能还有很多变数。

      删除
  20. [img]http://ww3.sinaimg.cn/bmiddle/70166f5djw1dwnogpao3nj.jpg[/img]
    [url=https://www.twitter.com/aiww]aiww的twitter[/url]
    [url=http://t66y.com]福利[/url]

    回复删除
  21. 博主啊,今天怎么这么多放鞭炮的?特别是傍晚放的连成片了,今才到异乡,嘛都不知道啊,博主知道是啥日子吗?

    回复删除
  22. 胡锦涛的软弱差点害死习近平,胡哥根本不是曾庆红的对手,胡哥死保中共这条破船,结果险些断送了习副主席的性命,据我们大陆网友猜测江派下一个目标有可能是李克强,我们奉劝胡温习李为了保命抛弃中共,学戈尔巴乔夫将中共解体,让中国民众摆脱苦难,活的有尊严,不然中华民族的未来将断送在你们四人之手,同时你们也将为江派背上黑锅,成为中华民族的千古罪人。

    回复删除
    回复
    1. 习近平是江隔代钦点的,本身就是江派。
      奉劝FDG的不要以为什么胡温习李是好人,能到那个位置的没有一个好人。奉劝这奉劝那。
      习真要死了就好,中共任何内斗内耗都是乐观其成。

      删除
  23. 【韩国总统李明博就7岁女童遭性侵向国民下跪道歉】神奇的中国曾经爆发官员性侵幼女大案的地区:浙江丽水、浙江永康、河南镇平、河南 永城、陕西略阳、贵州习水、福建安溪、福建霞浦、四川宜宾、甘肃成县、辽宁营口大石桥,连地方官员道歉都没有,却发生被性侵幼女母亲被劳教的奇事。

    [url]http://t.qq.com/p/t/130173077739747?p=2&time=1347032487&mid=129174039433540[/url]

    [img]http://t2.qpic.cn/mblogpic/0963ac60d10111a0b1a0/460[/img]

    回复删除
    回复
    1. http://t.qq.com/p/t/130173077739747?p=2&time=1347032487&mid=129174039433540

      删除
    2. 博主,以上这个网址用在你提供的链接语法上怎么不行呢?

      删除
    3. TO 楼上
      抱歉,俺的脚本有点 Bug,刚才已经改好了。链接可以显示了 :)

      删除
    4. test bbcode
      士郎[quote]是人,就会死[/quote]

      删除
  24. 香港“国民教育”的洗脑:攻击美国民主说是“政党恶斗,人民当灾”;吹捧中共是“进步、无私与团结的执政集团”。

    共匪真它妈的不要脸,愚民都到了这份上,它们以为曾经自由过的香港人都是傻子吗?共匪把美国的政党公平竞争,公民参与自由民主选举说成是“政党恶斗,人民当灾”;把共匪的独裁专制、集体世袭说成是“进步、无私与团结的执政集团”。

    共匪幻想把此种欺骗带至香港,妄图把香港人变为共匪的奴隶,共匪真它妈恶心。

    回复删除
  25. 我觉得把单元靠得近一些。离太开了 单元和楼层区分度不大,看得有点累。。

    回复删除
    回复
    1. 多谢建议 :)
      刚才俺已经把单元之间的间隔调小了。

      删除
  26. 直接用disqus不好么

    回复删除
    回复
    1. disqus速度、安全性怎么样?

      删除
    2. 俺之前没接触过 Disqus。
      刚才简单看了一下介绍,这玩意儿可以跟 BlogSpot 整合,功能貌似也挺强的。

      但是评论的内容是由 Disqus 存储的,这点俺不太放心。
      另外,这玩意儿貌似需要用帐号(Disqus账号或第三方平台账号)登录后,才能评论。
      而 BlogSpot 自带的评论功能允许 匿名评论(无需登录)。

      删除
  27. 试试图片语法:

    [img]http://s1.t.itc.cn/mblog/pic/201210_21_14/18428617203306987.jpg[/img]

    回复删除
  28. 相声演员升少将
    [img]http://s1.djyimg.com/i6/1210220101102343--ss.jpg[/img]

    回复删除
  29. 试试语法
    [img]http://static.tieba.baidu.com/tb/editor/images/baodong_d/bd_0024.gif[/img]

    回复删除
    回复
    1. 这家伙是甚么, 遇过几次都不知是甚么来的

      删除
  30. 反反复复反反复复

    回复删除
  31. 此评论已被作者删除。

    回复删除
  32. [img]https://upload.wikimedia.org/wikipedia/en/thumb/c/cf/Flag_of_Canada.svg/1280px-Flag_of_Canada.svg.png[/img]

    回复删除
  33. 感谢博主分享代码,我已经给我的博客加上了。测试成功。

    回复删除
  34. 此评论已被作者删除。

    回复删除
  35. 《看!耶稣的丑恶灵魂》(节选)

    耶处处为自己打算,自私自利到极点,但在门徒们面前却又装作很廉洁。耶稣是个地地道道的伪君子。他买了一大袋鱼饵撒在某个水域,然后指示不知实情的西门说:“把船开到水深之处,下网打鱼。”从这一件小事就可以看出耶稣的小算盘打的有多精。

    还有一次,他买了一些LED灯和移动电源,藏在衣服里,带着彼得、雅各和约翰上山祈祷。他祷告的时候按下了LED灯的开关,他的形像就变得明亮,衣裳洁白如光。这就是他那个“登山变像的神迹”的真相。他还收买了两个无知的群众化妆成已经去世的摩西和以利亚与他谈论他自己很快去世的事。

    回复删除