编程随想 | 博客的评论功能升级，顺便分享一下实现方法

★广而告之

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

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

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

4. 评论支持 BBCode 语法
可以在评论中使用常见的几种 BBCode 语法，目前支持如下几种：

关于 BBCode 的更多介绍，请看”这里“。

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

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

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

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

★如何实现”嵌套评论”？

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

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

在模板中找到如下代码：

修改为如下：

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

★如何添加楼层数？

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

◇使用 JavaScript 显示楼层号

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

优点：
支持各种浏览器

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

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

在模板中找到如下代码：

修改为如下：

最后点 “保存” 按钮。
如果你想调整楼层号的显示样式，可以在模板的 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%;

修改完之后，点 “保存” 按钮。

★如何添加头像？

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

在模板中找到如下代码：

修改为如下：

还没完，就在这行代码下方2-3行的地方有如下代码：

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

俺博客上，和本文相关的帖子（需翻墙）：
如何用GreaseMonkey扩展Google Reader

本文由自动聚合程序取自网络，内容和观点不代表数字时代立场