前言
以前看见评论框会显示UA和OS时感觉挺高大的(/ω╲)
就去问度娘方法,得到后一直尝试,却从未成功
明明都是WorldWordPress,为啥我不行ㄟ( ▔, ▔ )ㄏ
于是下定决心,弃坑😅
最近改评论框的时候才想起它,
又去百度了一波,最终弄好了(  ̄ー ̄)
不过这次用的是Hexo,
是不是WordPress有问题o(一︿一+)o
显示UA & OS
查看代码时请使用电脑
JS本地化
- 将多说核心JS(embed.js)本地化 (百度一下?)
编辑JS
- 编辑已经本地化的多说核心JS (embed.js):
添加
- 在embed.js头部加入以下代码 || 引用 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
117
118
119
120//移动客户端判断开始,作用:在移动客户端显示不同样式
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-firefox"></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(/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-qq"></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-qq"></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-edge"></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-chrome"></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-safari"></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-opera"></i> Opera' + '|' + r[1]
} else if (r = e.match(/Trident\/7.0/gi)) {
outputer = '<span class="ua_ie"><i class="fa fa-internet-explorer"></i> Internet Explorer 11'
} else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {
outputer = '<span class="ua_ie"><i class="fa fa-internet-explorer"></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-windows"></i> Windows 8'
} else if (e.match(/nt 6.3/ig)) {
os = '<span class="os_8_1"><i class="fa fa-windows"></i> Windows 8.1'
} else if (e.match(/nt 10.0/ig)) {
os = '<span class="os_8_1"><i class="fa fa-windows"></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'
} 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'
} else {
os = '<span class="os_other"><i class="fa fa-desktop"></i> 其它操作系统'
}
return os + "</span>";
}
//显UA结束
搜索
- 在embed.js中查找以下代码
—如果找不到请先 点此格式化JS
data-qqt-account=”‘ + (r.qqt_account || “”) + ‘“>’ + u(r.name) + ““),
添加
- 在此之后添加如下代码(显示时OS在前,UA在后):
t += “<span class="ua">” + sskos(s.agent) + “<span class="ua">” + sskua(s.agent) + ““,
编辑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/*多说UA开始*/
span.ua {
margin:0 1px ;
color:#FFFFFF ;
/*text-transform:Capitalize!important;
float:right!important;
line-height:18px!important;
*/
}
.ua_other.os_other {
background-color:#ccc ;
color:#fff;
border:1px solid #BBB ;
border-radius:4px;
}
.ua_ie {
background-color:#428bca ;
border-color:#357ebd ;
border-radius:4px;
padding:0 5px ;
}
.ua_firefox {
background-color:#f0ad4e ;
border-color:#eea236 ;
border-radius:4px;
padding:0 5px ;
}
.ua_maxthon {
background-color:#7373B9 ;
border-color:#7373B9 ;
border-radius:4px;
padding:0 5px ;
}
.ua_ucweb {
background-color:#FF740F ;
border-color:#d43f3a ;
border-radius:4px;
padding:0 5px ;
}
.ua_sogou {
background-color:#78ACE9 ;
border-color:#4cae4c ;
border-radius:4px;
padding:0 5px ;
}
.ua_2345explorer {
background-color:#2478B8 ;
border-color:#4cae4c ;
border-radius:4px;
padding:0 5px ;
}
.ua_2345chrome {
background-color:#F9D024 ;
border-color:#4cae4c ;
border-radius:4px;
padding:0 5px ;
}
.ua_mi {
background-color:#FF4A00 ;
border-color:#4cae4c ;
border-radius:4px;
padding:0 5px ;
}
.ua_lbbrowser {
background-color:#FC9D2E ;
border-color:#4cae4c ;
border-radius:4px;
padding:0 5px ;
}
.ua_chrome {
background-color:#EE6252 ;
border-color:#4cae4c ;
border-radius:4px;
padding:0 5px ;
}
.ua_qq {
background-color:#3D88A8 ;
border-color:#4cae4c ;
border-radius:4px;
padding:0 5px ;
}
.ua_apple {
background-color:#E95620 ;
border-color:#4cae4c ;
border-radius:4px;
padding:0 5px ;
}
.ua_opera {
background-color:#d9534f ;
border-color:#d43f3a ;
border-radius:4px;
padding:0 5px ;
}
.os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {
background-color:#39b3d7 ;
border-color:#46b8da ;
border-radius:4px;
padding:0 5px ;
}
.os_android {
background-color:#98C13D ;
border-color:#01B171 ;
border-radius:4px;
padding:0 5px ;
}
.os_ubuntu {
background-color:#DD4814 ;
border-color:#01B171 ;
border-radius:4px;
padding:0 5px ;
}
.os_linux {
background-color:#3A3A3A ;
border-color:#1F1F1F ;
border-radius:4px;
padding:0 5px ;
}
.os_mac {
background-color:#666666 ;
border-color:#1F1F1F ;
border-radius:4px;
padding:0 5px ;
}
.os_unix {
background-color:#006600 ;
border-color:#1F1F1F ;
border-radius:4px;
padding:0 5px ;
}
.os_nokia {
background-color:#014485 ;
border-color:#1F1F1F ;
border-radius:4px;
padding:0 5px ;
}
/*多说UA结束*/
引用(可选)
- 在HTML中引用这两个CSS文件(如果需要显示图标):
//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css
*//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css
*
—不建议将这两个CSS文件本地化,容易出现引用失败问题
—[点击这里]可以看到更多图标(675+),使用时请在<span class="ua_ie">
、<span class="os_xp">
等代码后加入图标代码,如(浅红色标签):
Apple <i class="fa fa-apple" aria-hidden="true"></i>
Android <i class="fa fa-android" aria-hidden="true"></i>
Chrome <i class="fa fa-chrome" aria-hidden="true"></i>
Desktop <i class="fa fa-desktop" aria-hidden="true"></i>
InternetExplorer <i class="fa fa-internet-explorer" aria-hidden="true"></i>
显示博主标志
JS本地化
- 参见上文
编辑JS
添加
- 在embed.js头部加入以下代码 || 引用 js文件:
//管理员判断开始 function sskadmin(e) { var ssk = ''; if (e.user_id == 【多说ID】) { ssk = '<span class="sskadmin"> ' + '博主' + '</span> ' } return ssk; } //管理员判断结束
- 请将‘【多说ID】’替换为自己(博主)的多说ID
- ‘博主’可以替换为任意文字,比如站长,管理员之类的
- 如需显示博主图标请在
<span class="sskadmin">
后加入代码 && 引用上文所说的两个CSS文件:**
<i class="fa fa-user-o" aria-hidden="true"></i>
**
搜索
- 在embed.js中搜索代码:
—如果找不到,请先 点此格式化JS
*
data-qqt-account="' + (r.qqt_account || "") + '">' + u(r.name) + "</span>"),
*
添加
- 在此之后加入代码:*
t += sskadmin(r),
*
保存代码,刷新一下
效果图:
- UAの配色看起来可能有点怪,自行调整下吧~
- 差点忘记说方法,千万别打我
_(:з 」∠)_
- 在css查找对应样式(class),如
<span class="os_android">
对应.os_android
:.os_android { background-color:#98C13D ;/*背景色*/ border-color:#01B171 ; border-radius:4px; padding:0 5px ; }
- 将
background-color:#98C13D!important;
中的#98C13D
替换成顺眼喜欢的[颜色代码]
- 如果显示的UA有误,请 [访问此站] 复制User-Agent信息并评论在下方
声明,本文内容参考自
搜索客の 多说回复后显示浏览器及操作系统信息 && 多说社会化评论框添加"站长回复"标记