前言

昨天博客接入了評論系統，使用的是國內的多說。

之前看到過有些利用該評論系統的有瀏覽器和系統信息的顯示，感覺很不錯。

所以，也想有這樣的效果。

問題

多說如何顯示瀏覽器和系統的信息?

解決方法

經過查找，利用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(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>');
 9           return rs;
10       }
11   }
12   function show_ua(string){
13       $.ua.set(string);
14       var sua=$.ua;
15       if(sua.os.version=='x86_64')sua.os.version='x64';
16       return '<span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>';
17   }
18   </script>

無刷新載入的請使用下麵代碼:

 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   var hookDUOSHUO_bl=false;
 5   function hookDUOSHUO_tp(){
 6       if(hookDUOSHUO_bl)return;
 7       else hookDUOSHUO_bl=true;
 8       var _D_post=DUOSHUO.templates.post;
 9       DUOSHUO.templates.post=function (e,t){
10           var rs=_D_post(e,t);
11           if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>');
12           return rs;
13       }
14   }
15   function show_ua(string){
16       $.ua.set(string);
17       var sua=$.ua;
18       if(sua.os.version=='x86_64')sua.os.version='x64';
19       return '<span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>';
20   }
21   </script>

3. 引入ua-parser.js庫

<script src="http://faisalman.github.io/ua-parser-js/src/ua-parser.js"></script>

可以將庫文件下載到本地添加到主題中。

要先引入jquery庫文件。

引入的ua-parser.js庫文件必須在多說embed.js之後。

推薦載入多說js代碼中：

 1 <script type="text/javascript">
 2   var duoshuoQuery = {short_name:"<%= theme.duoshuo_shortname %>"};
 3   (function() {
 4     var ds = document.createElement('script');
 5     ds.type = 'text/javascript';ds.async = true;
 6     ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
 7     ds.charset = 'UTF-8';
 8     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
 9     ds = document.createElement('script');
10     ds.type = 'text/javascript';ds.async = true;
11     ds.src = 'http://faisalman.github.io/ua-parser-js/src/ua-parser.js';
12     ds.charset = 'UTF-8';
13     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
14   })();
15 </script >

效果圖

原文來自：seay前端博客