前言
昨天博客接入了评论系统,使用的是国内的多说。
之前看到过有些利用该评论系统的有浏览器和系统信息的显示,感觉很不错。
所以,也想有这样的效果。
问题
多说如何显示浏览器和系统的信息?
解决方法
经过查找,利用UAParser.js可以实现。
步骤
1. 添加样式
1 span.this_ua { background-color: #ccc!important;border-radius: 4px;padding: 0 5px!important;margin: 0 1px!important;border: 1px solid #BBB!important;color: #fff;} 2 .this_ua.platform.Windows{ background-color: #39b3d7!important;border-color: #46b8da!important;} 3 .this_ua.platform.Linux { background-color: #3A3A3A!important;border-color: #1F1F1F!important;} 4 .this_ua.platform.Android { background-color: #00C47D!important;border-color: #01B171!important;} 5 .this_ua.browser.Chrome{ background-color: #5cb85c!important;border-color: #4cae4c!important;} 6 .this_ua.browser.Firefox{ background-color: #f0ad4e!important;border-color: #eea236!important;} 7 .this_ua.browser.IE{ background-color: #428bca!important;border-color: #357ebd!important;} 8 .this_ua.browser.Opera{ background-color: #d9534f!important;border-color: #d43f3a!important;}
可以新建一个css文件,在页面中添加引用。
如自定义显示颜色css请加.this_ua.platform.相关名称(注意大小写)。
2. 添加js代码
这段代码最好放在多说js代码之后,可以放在多说js的下面。
下面两段代码根据需要选择。
正常加载使用这段代码:
1 <script type="text/javascript"> 2 if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp(); 3 else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp; 4 function hookDUOSHUO_tp(){ 5 var _D_post=DUOSHUO.templates.post 6 DUOSHUO.templates.post=function (e,t){ 7 var rs=_D_post(e,t); 8 if