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

17 条评论:

  1. 呵呵 万分感谢Marcher兄^^
    我也用的是传统模板,正是很多功能都不知道怎么实现 呵呵

    再次感谢,那我转走了啊~

    回复删除
  2. @Zoll 客气客气,这其实也有不少别人的灵感,我整理了而已。以后多多交流。

    回复删除
  3. @Marcher 发现如果Firefox在开了adblock plus的情况下会出现问题。没有显示已经粘帖。

    而且 还发现在开了adblock下 这个页面也显示不正常,关了就好了。。

    回复删除
  4. @Zoll 应该是我的AdBlock订阅了一个适用于中国的广告屏蔽条目,那里面有阻止这个Flash的代码

    回复删除
  5. @Zoll 那说明AdBlock还是很棒的,因为这个Flash是0*0像素,极具广告嫌疑啊。
    因为我好久没安过这插件了,所以没注意到,多谢提醒。

    回复删除
  6. @Marcher 呵呵 的确 不过。。我还是没有测试成功。。不知道是不是模板问题 不适合?

    回复删除
  7. @Zoll 看了一下你的模板。你试着把下面 copy2Clipboard 函数的这段挪到《BlogItemComments》 《/BlogItemComments》之外试试。

    回复删除
  8. @Marcher 还是不行 发现有个flashcopier 的id 是不是要加啊? 复制的时候是它在起作用?

    回复删除
  9. @Zoll 不必,函数会自动创建的。
    我知道错误了,一段函数最后缺少}。给你发了邮件,请查收。

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

    回复删除
  11. 不错,去试试看

    回复删除
  12. 你好,请问你上面那个“留言”是怎么做的呀,可以分享代码吗?真是万分感激了,我已经寻找很久了,[email protected]。小弟在这先跪谢了。

    回复删除
  13. 这个啊 不知道怎么说啊 哎,你说呢 [link http://www.gulouhospital.com/zhuanti/gmxzdxsy/]过敏性紫癜性肾炎[/link] 希望能解决好

    回复删除
  14. 谢谢LZ,我得好好试试。

    回复删除
  15. 我想试一下,但是好像Opera不能是用此功能~

    回复删除
  16. @eagle1879 抱歉,这个方法已经过时了。这里是最新的:http://www.marcher.com.cn/2009/01/blogger.html

    回复删除

请勿张贴商业广告。评论可能需要审核。
No advertisement. Comment review enabled.