想要在多说评论中显示浏览器以及操作系统信息,第一步当然是获取信息,这部分的处理放在多说的embed.js文件中,还有一部分是显示浏览器以及操作系统信息,这部分在多说系统中添加自定义的CSS来实现。

自定义embed.js

多说默认用到的embed.js是从多说官方提供的,地址是http://static.duoshuo.com/embed.js
这里,我们需要修改embed.js文件,所以,先把官方提供的embed.js文件下载下来,在embed.js文件中增加检测浏览器和操作信息的代码,在embed.js文件顶部添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
//移动客户端判断开始,作用:在移动客户端显示不同样式
function sskcheckMobile(){
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;
}
//移动客户端判断结束
//显UA开始
function sskua(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'
} 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"><a href="http://ssk.91txh.com/2345download.php?id=2" target="_blank" style="color:#FFFFFF!important;"><i class="fa fa-globe"></i> 2345王牌浏览器</a>'
} else if (r = e.match(/2345chrome/ig)) {
outputer = '<span class="ua_2345chrome"><a href="http://ssk.91txh.com/2345download.php?id=3" target="_blank" style="color:#FFFFFF!important;"><i class="fa fa-globe"></i> 2345加速浏览器</a>'
} 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(/Edge([\d]*)\/([^\s]+)/ig)) {
var r1 = r[0].split("/");
outputer = '<span class="ua_ie"><i class="fa fa-globe"></i> Edge' + '|' + 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' + '|' + r[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(sskcheckMobile()){
Mobile='<br><br>';
}else{
Mobile='';
}
return outputer+"</span>"+Mobile ;
}
function sskos(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> 其它操作系统'
}
return os+"</span>" ;
}
//显UA结束

然后,找到

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

在后面添加

1
t += "<span class=\"ua\">" + sskua(s.agent) + "</span><span class=\"ua\">" + sskos(s.agent) + "</span>",

找到Hexo模板中插入多说评论的Js代码,修改导入ember.js文件的地址为自定义的,这里可以将自定义的放到七牛云等静态资源托管平台,也可以放在当前项目静态文件目录中。
我的Hexo主题是使用的maupassant,插入多说评论的Js代码在主题的文件是layout/_partial/after_footer.jade,把

1
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';

改为

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

其中,我自定义的embed.js文件放在maupassant主题下的source/js/目录下。

自定义显示CSS

将下面的CSS样式添加到多说后台自定义CSS中

登录多说,在后台->设置->基本设置->自定义CSS中添加下面的自定义的CSS即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/*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*/

多说评论用户头像水平翻转效果

在多说系统的自定义CSS中添加如下代码即可实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/*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*/