前言

上篇我們詳細(xì)介紹了多說評論自定義CSS頭像把介。為了彰顯極(zhuang)客(bi)范兒毡证，單單炫酷的頭像動(dòng)畫可是不夠的牺陶。接下來我們就要談?wù)撐覀兊亩嗾f評論框中篇之顯示UA(User Agent)信息和博主昧甘，話不多說坑傅，切入正題~

多說添加UA(User Agent)等個(gè)性化信息

本地化embed.js

1件豌、下載embed.js

多說官方 -http://static.duoshuo.com/embed.js

2疮方、上傳embed.js

我的做法上傳到GitHub，其它類似七偶胪或者云主機(jī)的方法都可以
http://viosay.github.io/assets/js/embed.js

3骡显、修改多說調(diào)用地址

在Hexo的主題中的duoshuo.ejs文件中修改調(diào)用地址，其它平臺(tái)以此類推，我自己的做法

ds.src = '/assets/js/embed.js';

修改embed.js

1惫谤、獲取多說ID

方法一：在文章下方登錄后評論點(diǎn)擊頭像可獲取多說ID
方法二：訪問多說后臺(tái)壁顶，http://duoshuo.com/settings/，點(diǎn)擊你的用戶名溜歪，地址欄中會(huì)出現(xiàn)如如下的ID地址http://duoshuo.com/profile/6223597840313090818/

2博助、添加個(gè)性化信息到embed.js文件

在embed.js的最上面添加以下代碼：
(注意修改e.user_id多說ID，可以自定義ssk前端顯示昵稱)

//移動(dòng)客戶端判斷開始
function checkMobile() {
   var isiPad = navigator.userAgent.match(/iPad/i) != null;
   if (isiPad) {
       return false;
   }
   var isMobile = navigator.userAgent.match(/iphone|android|phone|mobile|wap|netfront|x11|java|opera mobi|opera mini|ucweb|windows ce|symbian|symbianos|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig browser|hiptop|benq|haier|^lct|320x320|240x320|176x220/i) != null;
   if (isMobile) {
       return true;
   }
   return false;
}
//移動(dòng)客戶端判斷結(jié)束
//管理員判斷開始
function sskadmin(e) {
   var ssk = '';
   if (e.user_id == 6223597840313090818) {
       if (checkMobile()) {
           ssk = '<span class="ua"><span class="sskadmin">博主</span></span><br><br>';
       } else {
           ssk = '<span class="ua"><span class="sskadmin">博主</span></span>';
       }
   } else {
       if (checkMobile()) {
           ssk = '<br><br>';
       }
   }
   return ssk;
}
//管理員判斷結(jié)束
//顯UA開始
function ua(e) {
   var r = new Array;
   var outputer = '';
   if (r = e.match(/FireFox\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_firefox"><i class="fa fa-globe"></i> Mozilla FireFox' + ' ' + r1[1]
   } else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_maxthon"><i class="fa fa-globe"></i> Maxthon' + ' ' + r1[1]
   } else if (r = e.match(/BIDUBrowser([\d]*)\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> 百度瀏覽器' + ' ' + r1[1]
   } else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser' + ' ' + r1[1]
   } else if (r = e.match(/UCBrowser([\d]*)\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser' + ' ' + r1[1]
   } else if (r = e.match(/MetaSr/ig)) {
       outputer = '<span class="ua_sogou"><i class="fa fa-globe"></i> 搜狗瀏覽器'
   } else if (r = e.match(/2345Explorer/ig)) {
       outputer = '<span class="ua_2345explorer"><i class="fa fa-globe"></i> 2345王牌瀏覽器'
   } else if (r = e.match(/2345chrome/ig)) {
       outputer = '<span class="ua_2345chrome"><i class="fa fa-globe"></i> 2345加速瀏覽器'
   } else if (r = e.match(/LBBROWSER/ig)) {
       outputer = '<span class="ua_lbbrowser"><i class="fa fa-globe"></i> 獵豹安全瀏覽器'
   } else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_qq"><i class="fa fa-weixin"></i> 微信' + ' ' + r1[1]
       /*.split('/')[0]*/
   } else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_qq"><i class="fa fa-globe"></i> QQ瀏覽器' + ' ' + r1[1]
       /*.split('/')[0]*/
   } else if (r = e.match(/QQ\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_qq"><i class="fa fa-globe"></i> QQ瀏覽器' + ' ' + r1[1]
       /*.split('/')[0]*/
   } else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_mi"><i class="fa fa-globe"></i> Miui瀏覽器' + ' ' + r1[1]
       /*.split('/')[0]*/
   } else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_chrome"><i class="fa fa-globe"></i> Chrome' + ' ' + r1[1]
       /*.split('.')[0]*/
   } else if (r = e.match(/safari\/([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_apple"><i class="fa fa-globe"></i> Apple Safari' + ' ' + r1[1]
   } else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) {
       var r1 = r[0].split("/");
       outputer = '<span class="ua_opera"><i class="fa fa-globe"></i> Opera' + ' ' + r1[1]
   } else if (r = e.match(/Trident\/7.0/gi)) {
       outputer = '<span class="ua_ie"><i class="fa fa-globe"></i> Internet Explorer 11'
   } else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {
       outputer = '<span class="ua_ie"><i class="fa fa-globe"></i> Internet Explorer' + ' ' + r[0]
       /*.replace('MSIE', '').split('.')[0]*/
   } else {
       outputer = '<span class="ua_other"><i class="fa fa-globe"></i> 其它瀏覽器'
   }
   if (checkMobile()) {
       Mobile = '<br><br>';
   } else {
       Mobile = '';
   }
   return outputer + "</span>" + Mobile;
}
function os(e) {
   var os = '';
   if (e.match(/win/ig)) {
       if (e.match(/nt 5.1/ig)) {
           os = '<span class="os_xp"><i class="fa fa-desktop"></i> Windows XP'
       } else if (e.match(/nt 6.1/ig)) {
           os = '<span class="os_7"><i class="fa fa-desktop"></i> Windows 7'
       } else if (e.match(/nt 6.2/ig)) {
           os = '<span class="os_8"><i class="fa fa-desktop"></i> Windows 8'
       } else if (e.match(/nt 6.3/ig)) {
           os = '<span class="os_8_1"><i class="fa fa-desktop"></i> Windows 8.1'
       } else if (e.match(/nt 10.0/ig)) {
           os = '<span class="os_8_1"><i class="fa fa-desktop"></i> Windows 10'
       } else if (e.match(/nt 6.0/ig)) {
           os = '<span class="os_vista"><i class="fa fa-desktop"></i> Windows Vista'
       } else if (e.match(/nt 5/ig)) {
           os = '<span class="os_2000"><i class="fa fa-desktop"></i> Windows 2000'
       } else {
           os = '<span class="os_windows"><i class="fa fa-desktop"></i> Windows'
       }
   } else if (e.match(/android/ig)) {
       os = '<span class="os_android"><i class="fa fa-android"></i> Android'
   } else if (e.match(/ubuntu/ig)) {
       os = '<span class="os_ubuntu"><i class="fa fa-desktop"></i> Ubuntu'
   } else if (e.match(/linux/ig)) {
       os = '<span class="os_linux"><i class="fa fa-linux"></i> Linux'
   } else if (e.match(/mac/ig)) {
       os = '<span class="os_mac"><i class="fa fa-desktop"></i> Mac OS X'
   } else if (e.match(/unix/ig)) {
       os = '<span class="os_unix"><i class="fa fa-desktop"></i> Unix'
   } else if (e.match(/symbian/ig)) {
       os = '<span class="os_nokia"><i class="fa fa-mobile"></i> Nokia SymbianOS'
   } else {
       os = '<span class="os_other"><i class="fa fa-desktop"></i> 其它操作系統(tǒng)'
   }
   return os + "</span>";
}
//顯UA結(jié)束

3痹愚、增加調(diào)用

添加完以上代碼后富岳，在編輯器中搜索：

data-qqt-account="'+(r.qqt_account||"")+'">'+u(r.name)+"</span>"),

在后面添加：

t+="<span class=\"ua\">" + sskadmin(s.author) + "</span><span class=\"ua\">" + ua(s.agent) +"</span><span class=\"ua\">"+ os(s.agent) + "</span>",

（如果搜索不到的話就減小點(diǎn)搜索范圍，如:data-qqt-account="'+）

多說后臺(tái)自定義CSS

請參考上篇方法加入多說自定義CSS

/*多說UA開始*/
    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;
    /*text-transform: Capitalize!important;
    float: right!important;
    line-height: 18px!important;*/
    
}
.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.Ubuntu {
    background-color: #DD4814!important;
    border-color: #DD4814!important;
}
.this_ua.platform.Mac {
    background-color: #666666!important;
    border-color: #666666!important;
}
.this_ua.platform.Android {
    background-color: #98C13D!important;
    border-color: #98C13D!important;
}
.this_ua.platform.iOS {
    background-color: #666666!important;
    border-color: #666666!important;
}
.this_ua.browser.Chrome {
    background-color: #EE6252!important;
    border-color: #EE6252!important;
}
.this_ua.browser.Chromium {
    background-color: #EE6252!important;
    border-color: #EE6252!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.Edge {
    background-color: #428bca!important;
    border-color: #357ebd!important;
}
.this_ua.browser.Opera {
    background-color: #d9534f!important;
    border-color: #d43f3a!important;
}
.this_ua.browser.Maxthon {
    background-color: #7373B9!important;
    border-color: #7373B9!important;
}
.this_ua.browser.Safari {
    background-color: #666666!important;
    border-color: #666666!important;
}
.this_ua.sskadmin {
    background-color: #00a67c!important;
    border-color: #00a67c!important;
}
/*UA End*/
    /*Head Start*/
    #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {
    border: 0px;
    color: #6D6D6B;
    text-shadow: none;
    background: #F3F3F3;
}
#ds-thread #ds-reset .ds-highlight {
    font-family: Microsoft YaHei, "Helvetica Neue", Helvetica, Arial, Sans-serif;
    ;font-size: 100%;
    color: #6D6D6B !important;
}
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {
    color: #696a52;
    background: #F2F2F2;
}
#ds-thread #ds-reset a.ds-highlight:hover {
    color: #696a52 !important;
}
#ds-thread {
    padding-left: 15px;
}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {
    overflow: visible;
}
#ds-thread #ds-reset .ds-post-self {
    padding: 10px 0 10px 10px;
}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {
    border: 0 !important;
}
#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {
    top: 15px;
    left: -20px;
    padding: 5px;
    width: 36px;
    height: 36px;
    box-shadow: -1px 0 1px rgba(0,0,0,.15) inset;
    border-radius: 46px;
    background: #FAFAFA;
}
#ds-thread .ds-avatar a {
    display: inline-block;
    padding: 1px;
    width: 32px;
    height: 32px;
    border: 1px solid #b9baa6;
    border-radius: 50%;
    background-color: #fff !important;
}
#ds-thread .ds-avatar a:hover {
    }
#ds-thread .ds-avatar > img {
    margin: 2px 0 0 2px;
}
#ds-thread #ds-reset .ds-replybox {
    box-shadow: none;
}
#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {
    left: 0;
    top: 0;
    padding: 0;
    width: 32px !important;
    height: 32px !important;
    background: none;
    box-shadow: none;
}
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
}
#ds-reset .ds-replybox a.ds-avatar,
#ds-reset .ds-replybox .ds-avatar img {
    padding: 0;
    width: 32px !important;
    height: 32px !important;
    border-radius: 5px;
}
#ds-reset .ds-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    -webkit-transition: .8s all ease-in-out;
    -moz-transition: .4s all ease-in-out;
    -o-transition: .4s all ease-in-out;
    -ms-transition: .4s all ease-in-out;
    transition: .4s all ease-in-out;
}
.ds-post-self:hover .ds-avatar img {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
#ds-thread #ds-reset .ds-comment-body {
    -webkit-transition-delay: initial;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: initial;
    background: #F7F7F7;
    padding: 15px 15px 15px 47px;
    border-radius: 5px;
    box-shadow: #B8B9B9 0 1px 3px;
    border: white 1px solid;
}
#ds-thread #ds-reset ul.ds-children .ds-comment-body {
    padding-left: 15px;
}
#ds-thread #ds-reset .ds-comment-body p {
    color: #787968;
}
#ds-thread #ds-reset .ds-comments {
    border-bottom: 0px;
}
#ds-thread #ds-reset .ds-powered-by {
    display: none;
}
#ds-thread #ds-reset .ds-comments a.ds-user-name {
    font-weight: normal;
    color: #3D3D3D !important;
}
#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {
    color: #D32 !important;
}
#ds-thread #ds-reset #ds-bubble {
    display: none !important;
}
#ds-thread #ds-reset #ds-hot-posts {
    border: 0;
}
#ds-reset #ds-hot-posts .ds-gradient-bg {
    background: none;
}
#ds-thread #ds-reset .ds-comment-body:hover {
    background-color: #F1F1F1;
    -webkit-transition-delay: initial;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: initial;
}
/*多說UA結(jié)束*/

至此拯腮，在多說評論框中添加ua顯示與博主標(biāo)示步驟就全部做完了

更多

評論框添加的UA前加上小圖標(biāo)
http://ssk.91txh.com/207
評論框添加 站長回復(fù) 標(biāo)記
http://ssk.91txh.com/207
多說不本地化embed.js評論顯示UA
http://easun.org/blog/archives/make_duoshuo_show_ua.html
多說UA插件
http://gerald.top/code/duoshuo-ua
ua-parser-js
https://github.com/faisalman/ua-parser-js

特別感謝：@wsgzao @蘿莉社 @我的那些事-搜索客