给多说评论加上浏览器系统信息:Make DUOSHUO Show UA

WP插件 欲思 28评论

使用Make DUOSHUO Show UA可以让多说评论插件变得更加丰富多彩。就是可以添加上访客的浏览器和系统信息。

之前有好多朋友在找这段代码。有的朋友找到了又不知道怎么用,今天有空就给大家简单说一下。先来一张效果图吧:

给多说评论加上浏览器系统信息: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="http://images.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

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (26)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(28)个小伙伴在吐槽
  1. 感谢分享 多说真难用 但原生评论也不好用。。
    菊部2016-08-04 11:07 回复
  2. 不知道第二个加在哪?
    sendtion2016-02-18 10:49 回复
1 2