2008年10月10日星期五

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

Flash Player 10 已经推出,相关安全更新会阻止本功能实现。详情...
最近的更新与解决方法在此...

虽然 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 能实现这个功能。