![](http://i.v2ex.co/kNlD5E2c.png)
前言
多說是一款社會化評論系統(tǒng),她改變了網站與用戶之間型雳,用戶與用戶之間的互動方式。當然Disqus在大家心目中可能更加具有影響力,而我選擇多說的原因也很簡單纠俭,一句話概括來說就是“接地氣的本地化評論托管服務”沿量。之前看到很多朋友自豪的使用WordPress時會選擇多說作為第三方評論插件,民間的高手們也根據官方的API開發(fā)出一些十分有趣的隱藏屬性冤荆。因為現在自己使用GitHub+Hexo搭建的靜態(tài)Blog朴则,也希望通過多說自定義CSS和多說評論顯示User Agent讓評論動感起來,文章記錄了自己所執(zhí)行的真實步驟钓简,擴展閱讀和原文中也會標注參考鏈接和注意點乌妒,embed.default.css和embed.js文件托管在GitHub上,歡迎大家分享自己的經驗外邓,我們一起完善這些簡單而有趣的小功能掸鹅。
感謝多說團隊和那些無私的開發(fā)者們
更新歷史
2015年04月25日 - 修復Font Awesome圖標顯示秉版,增加動態(tài)效果圖展示
2015年04月24日 - 初稿
閱讀原文 - http://wsgzao.github.io/post/duoshuo/
擴展閱讀
- duoshuo-mod - https://github.com/wsgzao/duoshuo-mod
- 出色的自定義效果展示 - http://dev.duoshuo.com/docs/4ff1cfd0397309552c000017
- HelloDog Index - http://wsgzao.github.io/index/#Hexo
多說自定義CSS
主要參考@V說深啤,他的文章中還分享了額外9種特效篡诽,滿足大家Duang的欲望哈
多說自定義CSS 讓你的多說評論動感起來 - http://www.vsay.cn/one-more-custom-css-lets-you-say-comments-city.html
![](http://ww3.sinaimg.cn/large/7207510dgw1erhrcp15bzg20dj0bm7l2.gif)
頭像水平翻轉
/*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: 30px;
}
#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: 50px !important;
height: 50px !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;
}
/*Head End*/
多說后臺自定義CSS
設置步驟超級簡單,登錄多說后臺->設置->基本設置->自定義CSS
![](http://ww1.sinaimg.cn/large/7207510dgw1ergrzty3c5j20mm0i4dj7.jpg)
多說評論顯示UA(User Agent)
主要參考@myhloli和@搜索客席镀,灰常感謝
多說評論框UA顯示/博主標記 - http://myhloli.com/duoshuo-ua-and-admin-tab.html
多說回復后顯示瀏覽器及操作系統(tǒng)信息(Useragent) - http://ssk.91txh.com/209
本地化embed.js
1.下載embed.js
多說官方 - http://static.duoshuo.com/embed.js
偷懶可以下載我當前使用的 - http://wsgzao.github.io/embed.js
2.獲取多說ID
方法一:在文章下方登錄后評論點擊頭像可獲取多說ID
方法二:訪問多說后臺匹中,http://duoshuo.com/settings/ ,點擊你的用戶名豪诲,地址欄中會出現如如下的ID地址
http://duoshuo.com/profile/867394/
3.本地修改embed.js
注意修改e.user_id多說ID顶捷,可以自定義ssk前端顯示昵稱
//移動客戶端判斷開始
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;
}
//移動客戶端判斷結束
//管理員判斷開始
function sskadmin(e) {
var ssk = '';
if (e.user_id == 867394) {
if (checkMobile()) {
ssk = '<span class="ua"><span class="sskadmin">R00T</span></span><br><br>';
} else {
ssk = '<span class="ua"><span class="sskadmin">R00T</span></span>';
}
} else {
if (checkMobile()) {
ssk = '<br><br>';
}
}
return ssk;
}
//管理員判斷結束
//顯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結束
4.上傳embed.js
我的做法上傳到GitHub,其它類似七攀豪椋或者云主機的方法都可以
http://wsgzao.github.io/embed.js
5.修改多說調用地址
其它平臺以此類推服赎,我自己的做法ds.src = '//wsgzao.github.io/embed.js';
<script type="text/javascript">
var duoshuoQuery = {short_name:"<%= theme.duoshuo_shortname %>"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = '//wsgzao.github.io/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
6.增加Font Awesome
官方下載壓縮包 - http://fontawesome.io/
解壓其中的fonts和css,根據你的Blog類型上傳至指定目錄引入CSS鏈接即可生效
7.多說后臺自定義CSS
請參考上文方法加入多說自定義CSS
/*UA Start*/
span.ua {
margin: 0 1px!important;
color: #FFFFFF!important;
/*text-transform: Capitalize!important;
float: right!important;
line-height: 18px!important;*/;
}
.ua_other.os_other {
background-color: #ccc!important;
color: #fff;
border: 1px solid #BBB!important;
border-radius: 4px;
}
.ua_ie {
background-color: #428bca!important;
border-color: #357ebd!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_firefox {
background-color: #f0ad4e!important;
border-color: #eea236!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_maxthon {
background-color: #7373B9!important;
border-color: #7373B9!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_ucweb {
background-color: #FF740F!important;
border-color: #d43f3a!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_sogou {
background-color: #78ACE9!important;
border-color: #4cae4c!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_2345explorer {
background-color: #2478B8!important;
border-color: #4cae4c!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_2345chrome {
background-color: #F9D024!important;
border-color: #4cae4c!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_mi {
background-color: #FF4A00!important;
border-color: #4cae4c!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_lbbrowser {
background-color: #FC9D2E!important;
border-color: #4cae4c!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_chrome {
background-color: #EE6252!important;
border-color: #4cae4c!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_qq {
background-color: #3D88A8!important;
border-color: #4cae4c!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_apple {
background-color: #E95620!important;
border-color: #4cae4c!important;
border-radius: 4px;
padding: 0 5px!important;
}
.ua_opera {
background-color: #d9534f!important;
border-color: #d43f3a!important;
border-radius: 4px;
padding: 0 5px!important;
}
.os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {
background-color: #39b3d7!important;
border-color: #46b8da!important;
border-radius: 4px;
padding: 0 5px!important;
}
.os_android {
background-color: #98C13D!important;
border-color: #01B171!important;
border-radius: 4px;
padding: 0 5px!important;
}
.os_ubuntu {
background-color: #DD4814!important;
border-color: #01B171!important;
border-radius: 4px;
padding: 0 5px!important;
}
.os_linux {
background-color: #3A3A3A!important;
border-color: #1F1F1F!important;
border-radius: 4px;
padding: 0 5px!important;
}
.os_mac {
background-color: #666666!important;
border-color: #1F1F1F!important;
border-radius: 4px;
padding: 0 5px!important;
}
.os_unix {
background-color: #006600!important;
border-color: #1F1F1F!important;
border-radius: 4px;
padding: 0 5px!important;
}
.os_nokia {
background-color: #014485!important;
border-color: #1F1F1F!important;
border-radius: 4px;
padding: 0 5px!important;
}
.sskadmin {
background-color: #00a67c!important;
border-color: #01B171!important;
border-radius: 4px;
padding: 0 5px!important;
}
/*UA End*/
其它開源方案
歡迎大家積極反饋交播,提出自己的想法_
Make DUOSHUO Show UA - http://git.oschina.net/huhuhuhu/Make-DUOSHUO-Show-UA/tree/master
ua-parser-js - https://github.com/faisalman/ua-parser-js
duoshuo-mod - https://github.com/wsgzao/duoshuo-mod
前端識別
大家可以猛擊測試各種UA
Useragent.js - http://zsxsoft.github.io/useragent.js/withimage.html
UAParser.js - http://faisalman.github.io/ua-parser-js/