【Angular JS】网站使用社会化评论插件,以及过程中碰到的坑

  目前正在开发自己的网站,技术上使用Angular JS + Express JS + Mongo DB。由于网站会有文章发布,因此需要有评论功能。评论功能也可以自己开发,但由于现在社会化评论插件很多,因此没有必要多花精力,使用专业的就好。

1. 什么是社会化评论插件?都有哪些常用的插件?

  社会化评论插件,指的就是无需自己开发评论功能,在自己网页上使用第三方的评论框,发出的评论将被保存在第三方的服务器上。使用时要在插件提供方官网上注册,注册好之后可获取实现功能的JS代码,以及将来可在官网上管理自己网站的评论。

  实现的原理,一般都是插件网站提供给你一段JS代码,你插入到需要评论的网页上即可。

  目前常用的评论插件有:

A. Disqus

  官网:https://disqus.com/

  这个应该是最老的,在国外使用最多的第三方评论插件。优点是老牌专业,通过JS代码可发现,国内很多网站的功能实现应该是参考了它。但缺点同样明显,就是国内的网站使用,访问速度个人感觉往往不好,加载有些慢。另外对国内的社交网站支持不好,仅支持Facebook,Twitter等,不支持微博等,这对访客的评论带来不便。

  并且i18n对中文的支持不好,网站上提供了中文版选项(它是依赖网友们的贡献提供多语言版本),但是我试了发现不能起作用。

  因此考虑到以上缺点,我放弃了它。

B. 多说

  官网:http://duoshuo.com/

  它和有言应该是国内使用较多的评论插件。优点是使用很方便,支持微博等国内社交网站账户登录。但缺点是使用过程中我感觉它的Bug还是不少,同时在其网站讨论版中,可以看到,提出问题的网友很多也很活跃。比如我发现了一个严重的问题,也有一些网友提出,就是有时候必须手动再刷新一次页面,才能显示评论框。这个问题后来采用了它的动态加载方式才得以解决。

  经过对比,比较,我最后选择的就是多说。

C. 有言

  官网:http://www.uyan.cc/

  和多说很像,我没有使用它的原因是,发现在使用时它会抛出Javascript error,导致评论框不能显示。因此多次调试没有解决问题后,我选择了放弃。

2. 如何在Angular JS中正确使用评论插件?

这里我还有一个需求,就是每篇文章都能讲评论区分开,也就是每篇文章显示自己的评论,评论不能串,或都显示一样。针对这个功能,其实每种插件都会提供线程Thread的概念,这个功能是指针对不同Thread ID的页面加载不同的评论。

  以多说为例。

  这里使用的是多说插件的动态加载方式,标准代码可参见官网:http://dev.duoshuo.com/docs/50b344447f32d30066000147。

  在标准代码中,有一个通用的Javascript方法,如果我有多个页面,那么这段代码就需要复制多次。但在Angular JS中没有必要,Angular JS提供了Directive,即自定义标签的功能,可定义一个directive,在每个页面引用即可。

directive.js

 1 myApp.directive("comment", function() {
 2     return {
 3         restrict: 'A',
 4         link: function(scope){
 5             // get the variable from controller
 6             var article_id = scope.article_id;
 7             
 8             var data_thread_key = 'article_' + article_id;
 9             var data_url = 'article_' + article_id;
10             var data_author_key = 'http://blogtest.com/#!/article.html/' + article_id;
11             
12             // dynamic load the duoshuo comment box
13             var el = document.createElement('div');//该div不需要设置class="ds-thread"
14             el.setAttribute('data-thread-key', data_thread_key);//必选参数
15             el.setAttribute('data-url', data_url);//必选参数
16             el.setAttribute('data-author-key', data_author_key);//可选参数
17             DUOSHUO.EmbedThread(el);
18             jQuery('#comment-box').append(el);
19         }
20     };
21 });

  在这里我用每篇文章的article id来做评论插件的thread id,保证每篇文章的评论都分开。同时使用Directive的另一个好处是,directive里的JS方法,可以访问controller中的scope变量,如果你是和我一样在controller动态获取文章,那么就很方便在directive中拿到文章ID。

page.html

1 <div id="comment-box"></div> 
2 <div comment></div>

  在html页面中两行代码就足够了。comment就是指我们自定义的Directive插件。

  由此可以看到评论插件的效果如下:

3. 小结

  在使用与选择各种评论插件的过程中,自己走了很多坑。总结如下:

  1. 不同插件的产品质量不同,需要测试来发现与选择,有的知名产品但对你来说,效果很差,当然可能有你的问题。

  2. 不同插件对不同页面不同评论的支持不同,有的支持好,有的支持不好。像disqus,和多说支持就较好。

  3. Angular JS和插件组合使用时可能也有坑。在解决问题过程中,也可以加深对Angular JS的理解。

  希望对你有帮助。谢谢。

  我已经将自己的小网站开源,完整代码可参见:https://github.com/kevinsong1990/nodejs-blog

                                           - Kevin Song

                                           2015年8月2日 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

thinkphp 在本地正常,在云端ubuntu下报控制器不存在

thinkphp的控制器的文件夹默认是小写字母,如果你不经意间把它的第一个字母改为大写,ubuntu下的服务器在运行该框架时,就会出现找不到控制器,所以,如果出...

723
来自专栏简书专栏

基于bs4+requests的安居客爬虫

1.代码可以直接运行,请下载anaconda并安装,用spyder方便查看变量 或者可以查看生成的excel文件 2.依赖库,命令行运行(WIN10打开命令...

721
来自专栏更流畅、简洁的软件开发方式

【自然框架】之通用权限(七):权限到按钮

      继续,这是第七章了。我已经到了无话可说的地步了。哎,在坚持几章就结束了。第七章到第十章,我打算采用简单说明的方式来做,因为我感觉我这么写好像大家都不...

2289
来自专栏ATYUN订阅号

Jupyter Notebook最实用的5个魔术命令

Jupyter Notebook是一个基于Web的交互式工具,机器学习和数据科学社区都频繁使用它。它们用于快速测试,作为报告工具,甚至是在线课程中非常复杂的学习...

602
来自专栏张善友的专栏

使用WiX制作简单MSI安装程序

WiX完全用xml描述,使用命令行来生成。只要用任何一个文本编辑器就可以了。但是为了开发效率,我们还是借助于辅助工具比较好。是一般使用的工具是两个:一个Visu...

2839
来自专栏Python研发

Autopep8的使用

在python开发中, 大家都知道,python编码规范是PEP8,但是在市级开发中有的公司严格要求PEP8规范开发, 有的公司不会在乎那些,在我的理解中,程序...

985
来自专栏北京马哥教育

手把手教你从无到有写一个运维APP

? 由于自己现在无业游民,所以没有什么现成的环境,环境就随便找个公网的。再者当下的完成度应该算不上一个完整的 APP,但是作为参考,依瓢画葫芦绝对足够了,如果...

3336
来自专栏杨建荣的学习笔记

总结nmon的诸多优点 (r4笔记第78天)

nmon在平时的工作中可能会多多少少接触到,从sourceforge上能够下载到nmon的包。可能是有着IBM的血统,这个工具对于AIX的支持力度要大得多。 当...

3398
来自专栏开源优测

AutoLine源码分析之静态页面模板及对应API介绍

本文主要分享AutoLine开源平台中各静态页面模板的作用及对应的API渲染。

851
来自专栏Netkiller

数据库与图片完美解决方案

数据库与图片完美解决方案 电商商品图品与数据库脏数据完美解决方案 摘要 你是是不是在开发中常常遇到,删除了数据库记录后,发现该记录对应的图片没有删除,或者删除了...

2965

扫码关注云+社区