给Blogger添加“回复此评论”功能

虽然 Blogger 支持了不少功能，但还是无法满足我们的需求，所以我之前自己用 JavaScript 写了一个可以回复某评论的脚本。现共享如下。



事先说明，我使用的是 Blogger 模板(Template)，而非最新的 Blogger 布局(Layout)，所以这些代码都以模板模式出现，请使用布局模式的 Blogger 自行查找 Blogger Help，找到相应的代码。我也会尽量在之后查找相关帮助，进行补充。因为我目前对布局模式很不熟悉。



功能大致是以下思路：


首先，访客会看到文章下面已有的评论内容，比如如下的截图。评论之后有一个小图标，指示了访客，如果想对这个评论发表意见，点击即可。

当访客点击这个图标之后，会自动复制这个评论的作者名字和相关内容（比如本站复制的内容是“@评论者名字 ”），访客粘贴在评论框里即可快速回复指定的评论。这个评论之前的作者名带有链接，点击即可转到指定评论处。



首先需要获取指定评论的作者名字。这个值可以从 Blogger 模板的 <$BlogCommentAuthor$> 取得。但是这个返回值会带有评论者的帐户类型和其他标记，这些内容本不需要，所以用以下代码过滤 HTML 和名字最前面的一个空格。

之后便是复制代码的工作。因为访客可能使用各种各样的浏览器，所以复制函数会很复杂，而我选用了大多数桌面浏览器都支持的 Flash。JavaScript 把需要复制的文字传递给 Flash，随后 Flash 访问系统剪贴板，把需要的内容复制。这个方法来自网络上一位 Blogger 的作品，请阅读他的个人 Blog 了解更多信息。

把获得的信息，比如“@Marcher ”复制到剪贴板后，访客就可以快速地把要回复的评论者名字粘贴在评论框里了。为什么不能直接把内容放在评论框里？这是一个还无法解决的跨域问题，之前的帖子提到过。


这一切看起来顺理成章，但是访客用起来可能会有很大困难。Blogger 还需要就此进行说明；这更让阅读和回复 Blog 成为难事。



附参考代码：

（以下代码附在每条评论后，即传统模板的 <BlogItemComments></BlogItemComments> 之间。）

<script type="text/javascript">

function rmHTML<$BlogCommentNumber$>() { // 一个以当前评论 ID 为名称组成的函数名，防止重复


var fname = '<$BlogCommentAuthor$>'; // 获取评论者信息，代码中含有英文双引号，所以代码必须使用单引号

var fhtml = fname.replace(/<[^>].*?>/g,""); // 过滤掉信息里的 HTML 标记

var fname = fhtml.replace(/&nbsp;/,""); // 过滤掉名字最前面一个多余的空格

var content='@<a href="#comment-<$BlogCommentNumber$>">'+fname+'</a> '; // 给名字添加锚点链接


if(copy2Clipboard(content)!=false) alert("已复制。\n粘贴在评论框即可。");

}

</script>

（以下代码可以附在 Blogger 模板里，也可写作单独的 js 文档）

<script type="text/javascript">

function copy2Clipboard(replyThis) {

if (window.clipboardData) {

return(window.clipboardData.setData("Text",replyThis)); // IE 里可以简单地调用 clipboardData.setData 即可复制

} else { // 对于其他浏览器，则调用 Flash 复制功能


var flashcopier = 'flashcopier';

if(!document.getElementById(flashcopier)) {

var divholder = document.createElement('div');

divholder.id = flashcopier;

document.body.appendChild(divholder);

}

document.getElementById(flashcopier).innerHTML = '';

var divinfo = '<embed src="http://src.marcher.com.cn/template/2007/_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(replyThis)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';


document.getElementById(flashcopier).innerHTML = divinfo;

}

}

</script>

当然，在 IE7 之后版本会弹出是否允许访问剪贴板的提示，如果访客选择了“不允许”，复制则是不成功的。可以自行设置错误信息；也可以删掉 IE 的复制函数，直接让所有浏览器都是用 Flash 复制。

最后，在评论之后添加一个回复评论的小图标。

<a href="#" OnClick="rmHTML<$BlogCommentNumber$>();return false;" title="回复此评论">

欢迎大家讨论更多实现和改进方法。

当然，更期待之后 Blogger 能实现这个功能。