使用Make DUOSHUO Show UA可以让多说评论插件变得更加丰富多彩。就是可以添加上访客的浏览器和系统信息。
之前有好多朋友在找这段代码。有的朋友找到了又不知道怎么用,今天有空就给大家简单说一下。先来一张效果图吧:
这段代码其实就是依赖于ua-parser解析UserAgent。
ua-parser是个开源项目,有兴趣的朋友可以去研究下。地址: https://github.com/faisalman/ua-parser-js 。
废话不多说,直接说使用方法吧。
1、在style.css中加入一段显示浏览器和系统信息的样式:
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;} .this_ua.platform.Windows{background-color: #39b3d7!important;border-color: #46b8da!important;} .this_ua.platform.Linux {background-color: #3A3A3A!important;border-color: #1F1F1F!important;} .this_ua.platform.Android {background-color: #00C47D!important;border-color: #01B171!important;} .this_ua.browser.Chrome{background-color: #5cb85c!important;border-color: #4cae4c!important;} .this_ua.browser.Firefox{background-color: #f0ad4e!important;border-color: #eea236!important;} .this_ua.browser.IE{background-color: #428bca!important;border-color: #357ebd!important;} .this_ua.browser.Opera{background-color: #d9534f!important;border-color: #d43f3a!important;}
如自定义显示颜色css请加.this_ua.platform.相关名称(注意大小写)。其他css自定义修改。
2、引入ua-parser.min.js文件
<script src="http://faisalman.github.io/ua-parser-js/src/ua-parser.min.js"></script>
引入ua-parser的js文件。可以下载到本地传到主题相应的文件夹中。如果想加快速度也可以利用七牛云存储来进行cdn加速。
例如:
<script src="https://yusi123.com/ua-parser.min.js"></script>
注意:此段js必须放在加载embed.js之后,运行显示评论代码之前。建议如果不知道将以下代码放在何处你可以考虑放在文章节点末尾。
最后放上下面这两段代码中的一段即可。
正常加载使用这段代码:
<script type="text/javascript"> if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp(); else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp; function hookDUOSHUO_tp(){ var _D_post=DUOSHUO.templates.post DUOSHUO.templates.post=function (e,t){ var rs=_D_post(e,t); if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>'); return rs; } } function show_ua(string){ console.log(string) $.ua.set(string); var sua=$.ua; if(sua.os.version=='x86_64')sua.os.version='x64'; return '<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span><span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+'|'+sua.browser.version+'</span>'; } </script>
无刷新加载的请使用下面代码
<script type="text/javascript"> if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp(); else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp; var hookDUOSHUO_bl=false; function hookDUOSHUO_tp(){ if(hookDUOSHUO_bl)return; else hookDUOSHUO_bl=true; var _D_post=DUOSHUO.templates.post; DUOSHUO.templates.post=function (e,t){ var rs=_D_post(e,t); if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>'); return rs; } } function show_ua(string){ console.log(string) $.ua.set(string); var sua=$.ua; if(sua.os.version=='x86_64')sua.os.version='x64'; return '<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span><span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+'|'+sua.browser.version+'</span>'; } </script>
可以选择性使用那一段代码。没有安装多说插件的用户要实现类似的功能推荐使用Show UserAgent插件。后台搜索就能找到。
注:多说插件高级选项中勾选了脚本后置的朋友要注意引用文件的位置。在网页head插入多说核心脚本embed.js的可以无视。
项目开源可访问:http://git.oschina.net/huhuhuhu/Make-DUOSHUO-Show-UA
相关阅读:多说评论框各种CSS自定义设置问题收集
未经允许不得转载:欲思博客 » 给多说评论加上浏览器系统信息:Make DUOSHUO Show UA
评论28