【Angular JS】网站使用社会化评论插件,以及过程中碰到的坑
目前正在开发自己的网站,技术上使用Angular JS + Express JS + Mongo DB。由于网站会有文章发布,因此需要有评论功能。评论功能也可以自己开发,但由于现在社会化评论插件很多,因此没有必要多花精力,使用专业的就好。
1. 什么是社会化评论插件?都有哪些常用的插件?
社会化评论插件,指的就是无需自己开发评论功能,在自己网页上使用第三方的评论框,发出的评论将被保存在第三方的服务器上。使用时要在插件提供方官网上注册,注册好之后可获取实现功能的JS代码,以及将来可在官网上管理自己网站的评论。
实现的原理,一般都是插件网站提供给你一段JS代码,你插入到需要评论的网页上即可。
目前常用的评论插件有:
A. Disqus
这个应该是最老的,在国外使用最多的第三方评论插件。优点是老牌专业,通过JS代码可发现,国内很多网站的功能实现应该是参考了它。但缺点同样明显,就是国内的网站使用,访问速度个人感觉往往不好,加载有些慢。另外对国内的社交网站支持不好,仅支持Facebook,Twitter等,不支持微博等,这对访客的评论带来不便。
并且i18n对中文的支持不好,网站上提供了中文版选项(它是依赖网友们的贡献提供多语言版本),但是我试了发现不能起作用。
因此考虑到以上缺点,我放弃了它。
B. 多说
它和有言应该是国内使用较多的评论插件。优点是使用很方便,支持微博等国内社交网站账户登录。但缺点是使用过程中我感觉它的Bug还是不少,同时在其网站讨论版中,可以看到,提出问题的网友很多也很活跃。比如我发现了一个严重的问题,也有一些网友提出,就是有时候必须手动再刷新一次页面,才能显示评论框。这个问题后来采用了它的动态加载方式才得以解决。
经过对比,比较,我最后选择的就是多说。
C. 有言
和多说很像,我没有使用它的原因是,发现在使用时它会抛出Javascript error,导致评论框不能显示。因此多次调试没有解决问题后,我选择了放弃。
2. 如何在Angular JS中正确使用评论插件?
这里我还有一个需求,就是每篇文章都能讲评论区分开,也就是每篇文章显示自己的评论,评论不能串,或都显示一样。针对这个功能,其实每种插件都会提供线程Thread的概念,这个功能是指针对不同Thread ID的页面加载不同的评论。
以多说为例。
这里使用的是多说插件的动态加载方式,标准代码可参见官网:http://dev.duoshuo.com/docs/50b344447f32d30066000147。
在标准代码中,有一个通用的Javascript方法,如果我有多个页面,那么这段代码就需要复制多次。但在Angular JS中没有必要,Angular JS提供了Directive,即自定义标签的功能,可定义一个directive,在每个页面引用即可。
directive.js
myApp.directive("comment", function() {
return {
restrict: 'A',
link: function(scope){
// get the variable from controller
var article_id = scope.article_id; var data_thread_key = 'article_' + article_id;
var data_url = 'article_' + article_id;
var data_author_key = 'http://blogtest.com/#!/article.html/' + article_id; // dynamic load the duoshuo comment box
var el = document.createElement('div');//该div不需要设置class="ds-thread"
el.setAttribute('data-thread-key', data_thread_key);//必选参数
el.setAttribute('data-url', data_url);//必选参数
el.setAttribute('data-author-key', data_author_key);//可选参数
DUOSHUO.EmbedThread(el);
jQuery('#comment-box').append(el);
}
};
});
在这里我用每篇文章的article id来做评论插件的thread id,保证每篇文章的评论都分开。同时使用Directive的另一个好处是,directive里的JS方法,可以访问controller中的scope变量,如果你是和我一样在controller动态获取文章,那么就很方便在directive中拿到文章ID。
page.html
<div id="comment-box"></div>
<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日
【Angular JS】网站使用社会化评论插件,以及过程中碰到的坑的更多相关文章
- dropload.js(上拉加载插件使用过程中遇到的坑)
dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...
- [RN] React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题
React Native 使用 图片预览和放大 插件 react-native-image-zoom-viewer 过程中,放大报错问题 报错如下: Cannot record touch end w ...
- 使用nagios插件 check_mysql_health 过程中遇到的error
使用nagios插件 check_mysql_health 过程中遇到的error 1.如果在运行监控mysql插件的时候遇到了error安装以下依赖包就可以解决: yum install perl- ...
- WordPress社会化评论插件多说、有言、灯鹭、评论啦
社会化登录是指网站的用户通过使用QQ.人人网.腾讯微博.新浪微博等社会化媒体账号登录该网站,并让用户能够使用社会化媒体账号进行允许的操作,如评论.分享等.经过简单的代码整合,社会化媒体账号可以在第三方 ...
- blog 社会化评论插件 多说for china, disqus for global range
1.disqus https://disqus.com/ https://publishers.disqus.com/engage https://disqus.com/admin/create/ h ...
- 全屏使用swiper.js过程中遇到的坑
概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...
- 学习Nodejs:《Node.js开发指南》微博项目express2迁移至express4过程中填的坑
<Node.js开发指南>项目地址https://github.com/BYVoid/microblog好不容易找到的基础版教程,但书中是基于express2的,而现在用的是express ...
- Angular JS的Placeholder功能在IE8/9浏览器中不可用
附上如下代码可正常工作: .directive('placeholder', function($timeout){ var i = document.createElement('input'); ...
- maven插件运行过程中自动执行sql文件
配置pom.propertis即可 <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId> ...
随机推荐
- Could not instantiate bean class [org.springframework.data.mongodb.core.MongoTemplate]
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'repositoryDa ...
- 实施MySQL ReplicationDriver支持读写分离
MySQL 提供支持读写分离的驱动类: com.mysql.jdbc.ReplicationDriver 替代 com.mysql.jdbc.Driver 注意,所有参数主从统一: jdbc:mysq ...
- 【Cracking the Code Interview(5th edition)】一、数组与字符串(C++)
1.1 实现一个算法,确定一个字符串的所有字符是否全都不同.不允许使用额外的数据结构. 解答:这里假定字符集为ASCII码,可以与面试官沟通确认字符串使用的字符集.由于字符集是有限的,建立一个数组模拟 ...
- POJ1004 Financial Management
题目来源:http://poj.org/problem?id=1004 题目大意: Larry今年毕业并找到了工作.他开始赚很多的钱,然而他似乎总觉得不够.Larry决定好好掌控他的资产,解决他的财务 ...
- JQuery判断页面是否按下了Enter键
$('#someTextBox').keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.whi ...
- C# repeater控件序号绑定
做项目列表经常会需要列表有一个序号列,根据控件自身的属性就可以很方便的实现这个功能,如下图 这个不能用翻页功能,如果翻页重新刷新控件的话,序号会又重新开始!
- svg图转canvas,完全阔以的
遇到的问题:页面中存在svg画的图,也存在canvas图,在用 html2canvas 截取页面的图就导致有图画缺失,至少我需要的缺失了. 一.如果页面单纯的存在一个svg画的图,转为canvas就很 ...
- form组件之modelForm
modelForm的使用及参数设置 从modelForm这个名字就能看出来,这个form是和模型类model有知己诶关联的,还是以数和出版社的模型来说明: models.py(模型) from dja ...
- webAPI过滤器添加参数签名
项目需求: 接口对安卓和IOS开发接口,需要房子用户窜改数据请求接口.添加sign签名校验参数. 代码如下:加上特性标签就可以控制部分接口验证 public class SignAuthorizeFi ...
- 傻瓜式Spring教学第二课
什么是依赖注入 先说什么是依赖 如下: class A{ B b; } class B{ } 则称A依赖B. 依赖:A的某些业务逻辑需要B的参与,如果不对A中的参数b进行实例化,那么A中的某些业务逻辑 ...