给多说评论加上浏览器系统信息:Make DUOSHUO Show UA-欲思博客

阿里云的服务器，欲思一直在用，最近搞活动，限时优惠，大家抓紧上！

使用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