多说样式折腾记录 — 添加 UA 浏览器标识、旋转头像等

术业专攻

前言

简单记录自己个性化多说样式的过程，参考的教程和借鉴的代码基本包含在 参考资料 列表中，有不明白的可以试着查阅这些资料。

相关下载

自用完整多说 CSS 样式文件: duosuo.css by MOxFIVE
自用多说 embed-js 文件: embed-js by MOxFIVE

UA 浏览器标识

UA 浏览器标识

本地化 embed-js

　1. 先下载我修改好的 embed.js，文件源于网页分享，稍作调整:

  • 去掉了略显累赘的浏览器版本号；
  • 修改了部分浏览器和系统的图标。

　2. 获取多说数字 ID:

访问 多说后台，点击左侧你头像旁的昵称，之后会跳转到你的多说主页
http://duoshuo.com/profile/你的数字ID/，最后那几个数字就是你的数字 ID，记下备用。

　3. 个人化 embed.js:

将 e.user_id 的值修改为你的多说数字 ID。

1
2
3
function sskadmin(e) {
    var ssk = '';
    if (e.user_id == 你的多说数字ID)

　4. 云端化 embed.js:

让你的专属 embed.js 能通过一个网址访问。

  • Hexo 博客的话，假设你把 embed.js 放到 /themes/<主题名字>/source/js/ 文件夹下，部署云端后，你的文件地址就是 博客地址/js/embed.js。

　5. 修改多说调用地址:

修改多说代码中的 ds.src 为你的 embed.js 地址；

  • 主题 Yelee (v3.0) 在 yelee/layout/_partial/comments/duoshuo.ejs 里修改。
1
2
3
4
5
6
7
8
9
10
11
12
var duoshuoQuery = {short_name:"<%=theme.duoshuo%>"};
(function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;

    ds.src = 'http://moxfive.xyz/resources/embed.js';
    /*上面是我自己的 embed.js 链接，请改为你自己的地址*/

    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
})();

引入 Font Awesome

　　这里介绍下最快捷的方式，把下面代码放入对应 HTML head 头部即可。例如 Hexo 博客主题的通常是在 layout 文件夹下的 Head 文件中引入 [G]。

主题 Yelee 和 Yilia 已自带 Font Awesome，无需再引入。

1
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">

添加对应 CSS

　　拷贝以下代码到多说 后台自定义 CSS 框中保存。在网友分享基础上设置了透明度，没那么刺眼花哨了，顺便改了一下未识别 UA 的样式。

CSS 有点繁琐，不清楚如何为这些 UA 设置 Class，只好一个个分开写了。

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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
span.ua {
    display: inline-block !important;
    margin: auto 1px .3em !important;
    color: #fff !important;
}
.os_other {
    background-color: #bdb2a7!important;
    color: #fff;
    border: 1px solid #BBB!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_other {
    background-color: #bdb2a7!important;
    color: #fff;
    border: 1px solid #BBB!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_other {
    opacity: 1;
}
.os_other:hover {
    opacity: 1;
}
.ua_ie {
    background-color: #428bca!important;
    border-color: #357ebd!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_ie:hover {
    opacity: 1;
}
.ua_firefox {
    background-color: #f0ad4e!important;
    border-color: #eea236!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_firefox:hover {
    opacity: 1;
}
.ua_maxthon {
    background-color: #7373B9!important;
    border-color: #7373B9!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_maxthon:hover {
    opacity: 1;
}
.ua_ucweb {
    background-color: #FF740F!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_ucweb:hover {
    opacity: 1;
}
.ua_sogou {
    background-color: #78ACE9!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_sogou:hover {
    opacity: 1;
}
.ua_2345explorer {
    background-color: #2478B8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_2345explorer:hover {
    opacity: 1;
}
.ua_2345chrome {
    background-color: #F9D024!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_2345chrome:hover {
    opacity: 1;
}
.ua_mi {
    background-color: #FF4A00!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_mi:hover {
    opacity: 1;
}
.ua_lbbrowser {
    background-color: #FC9D2E!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_lbbrowser:hover {
    opacity: 1;
}
.ua_chrome {
    background-color: #EE6252!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_chrome:hover {
    opacity: 1;
}
.ua_qq {
    background-color: #3D88A8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_qq:hover {
    opacity: 1;
}
.ua_apple {
    background-color: #E95620!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_apple:hover {
    opacity: 1;
}
.ua_opera {
    background-color: #d9534f!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_opera:hover {
    opacity: 1;
}
.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;
    opacity: .4;
}
.os_vista:hover,.os_2000:hover,.os_windows:hover,.os_xp:hover,.os_7:hover,.os_8:hover,.os_8_1:hover {
    opacity: 1;
}
.os_android {
    background-color: #98C13D!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_android:hover {
    opacity: 1;
}
.os_ubuntu {
    background-color: #DD4814!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_ubuntu:hover {
    opacity: 1;
}
.os_linux {
    background-color: #3A3A3A!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_linux:hover {
    opacity: 1;
}
.os_mac {
    background-color: #666666!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_mac:hover {
    opacity: 1;
}
.os_unix {
    background-color: #006600!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_unix:hover {
    opacity: 1;
}
.os_nokia {
    background-color: #014485!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_nokia:hover {
    opacity: 1;
}
/*UA End*/

显示博主标记

博主标记

　　分别添加以下代码到你的 embed.js 文件和多说自定义 CSS ，自己多说账户的评论旁将显示博主标记。如果你用的是我上面提供的 embed.js，那修改好 e.user_id 时博主标记应该已经显示了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*博主标记: 添加到 embed.js*/
function sskadmin(e) {
    var ssk = '';
    if (e.user_id == 你的多说数字ID) {
        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;
}
1
2
3
4
5
6
7
8
9
10
11
/*博主标记 CSS*/
.sskadmin {
    background-color: #00a67c!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.sskadmin:hover {
    opacity: 1;
}

个性化 CSS 样式

　　通过网友教程，官方文档和审查元素工具个性化多说 CSS 样式。

旋转头像

旋转头像
　　源于网友分享，修改了旋转度数，动画时间，内边距。

1
2
3
4
5
6
/*头像样式*/
#ds-reset .ds-avatar{background:none !important; box-shadow:none !important;}
#ds-reset .ds-avatar img , #ds-thread #ds-reset ul.ds-children .ds-avatar img{width:50px !important;height: 50px !important;-webkit-transition: .9s;-moz-transition: .9s;-o-transition: .9s;-ms-transition: .9s;padding: 2px;border: 1px solid #ddd;background: #fff;}
/*鼠标悬停旋转头像*/
.ds-post:hover .ds-avatar img{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-radius:30px !important;}
#ds-reset .ds-avatar img:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-radius:30px !important;}

通用样式

　　源于网友分享。

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
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
.ds-post:hover{background:#eee !important;}
#ds-thread #ds-reset ul.ds-children .ds-avatar{width:50px !important;}
#ds-thread #ds-reset .ds-replybox{padding: 0 0 0 80px !important;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body{margin-left: 68px !important;}
#ds-recent-comments li.ds-comment:nth-of-type(1){border:none !important;}
#ds-thread{ 
    border-radius: 3px;
}
/** 多说最近留言样式 **/
#ds-recent-comments .ds-avatar img{   
    width:54px;height:54px; 
    border-radius: 50%; 
    -webkit-border-radius: 50%; 
    -moz-border-radius:50%;   
    box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/  
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;   
    -webkit-transition: 0.4s;      
    -webkit-transition: -webkit-transform 0.4s ease-out;   
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;   
}    
#ds-recent-comments .ds-avatar img:hover{  
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);   
    -moz-transform: rotateZ(360deg);   
}

喜欢按钮样式

　　透明度，背景，边框等样式调整。

1
2
3
4
5
6
7
8
9
10
11
12
13
.ds-meta {
    opacity: .5;
    }
.ds-meta:hover {
    opacity: 1;
    }
#ds-thread #ds-reset a.ds-like-thread-button {
    background-image: none;
    background-color: #fee2d3;
    border: none;
    text-shadow: none;
    font-family: inherit;
    }

社交账号登陆透明度

1
2
3
4
5
6
#ds-thread #ds-reset .ds-login-buttons {
    opacity: .5;
}
#ds-thread #ds-reset .ds-login-buttons:hover {
    opacity: 1;
    }

评论、文本框字体

　　默认字体偏小，稍作调整。

1
2
3
4
5
#ds-thread #ds-reset .ds-comment-body p, #ds-thread #ds-reset .ds-textarea-wrapper textarea {
    font-size: 1.15em;
    color: #717171;
    font-family: inherit;
    }

用户名等超链接颜色

1
2
3
#ds-thread #ds-reset .ds-highlight {
    color: #ef7c6c !important;
}

未登录用户名字颜色

　　颜色与其他登陆用户保持一致；

1
2
3
#ds-thread #ds-reset .ds-user-name {
    color: #ef7c6c !important;
}

评论框背景图片

　　选择合适大小的图片即可，带透明背景的更好。

1
2
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background: url("/resources/Mihawk-s.png") bottom right no-repeat;}

评论框背景

1
2
3
#ds-thread #ds-reset .ds-textarea-wrapper {
    background: rgba(255, 255, 255, .5);
}

工具栏背景

1
2
3
#ds-reset .ds-gradient-bg {
    background: rgba(255, 255, 255, .5);
}

“发布”按钮背景

　　去掉背景图，修改底色，去掉文字阴影。

1
2
3
4
5
#ds-thread #ds-reset .ds-post-button {
    background-image: none;
    background: rgba(136, 172, 219, .2);
    text-shadow: none;
}

评论列表背景

1
2
3
4
5
6
#ds-thread #ds-reset li.ds-post {
    background: rgba(255, 255, 255, .2);
}
#ds-thread #ds-reset li.ds-post:hover {
    background-color: rgba(255, 255, 255, .6) !important;
}

评论数标签

1
2
3
#ds-thread #ds-reset li.ds-tab a.ds-current {
    background: rgba(255, 255, 255, .2);
}

多说账户设置

　　在多说网站后台做的一些个性化设置。http://多说用户名.duoshuo.com/admin/settings

评论显示方式

　　比较喜欢嵌套模式，最大层数设为３，评论每页最多30条。

过滤机制

　　启用”Akismet智能过滤”，等再过一阵子公开博客后大概能用上吧。

默认头像

　　不大喜欢多说默认未登录访客的头像，修改为 QQ 匿名头像。
默认头像

参考资料

  1. 多说CSS修改 by 多说团队 on 2012: http://dev.duoshuo.com/docs/4ff1cfd0397309552c000017
  2. Font Awesome: http://fontawesome.io/
  3. 多说自定义CSS动感头像和多说评论显示User Agent的那些小事 by wsgzao on 2015/04/23: http://wsgzao.github.io/post/duoshuo/
  4. 我的多说CSS样式分享 by 赵小萌_Moe on 2015/01/29: http://myhloli.com/duoshuo-css.html
  5. 多说评论框UA显示/博主标记 by 赵小萌_Moe on 2015/02/22: http://myhloli.com/duoshuo-ua-and-admin-tab.html
  6. 多说评论框各种CSS自定义设置问题收集 by 欲思 on 2014/04/22: http://yusi123.com/2689.html

本文标题:多说样式折腾记录 — 添加 UA 浏览器标识、旋转头像等

文章作者:MOxFIVE

发布时间:2015-09-29, 01:24

最后更新:2016-05-24, 19:52

更新历史: Blame, History文本模式: .md Raw

原始链接:http://MOxFIVE.xyz/2015/09/29/duoshuo-style/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 前言
    1. 1.1. 相关下载
  2. 2. UA 浏览器标识
    1. 2.1. 本地化 embed-js
    2. 2.2. 引入 Font Awesome
    3. 2.3. 添加对应 CSS
    4. 2.4. 显示博主标记
  3. 3. 个性化 CSS 样式
    1. 3.1. 旋转头像
    2. 3.2. 通用样式
    3. 3.3. 喜欢按钮样式
    4. 3.4. 社交账号登陆透明度
    5. 3.5. 评论、文本框字体
    6. 3.6. 用户名等超链接颜色
    7. 3.7. 未登录用户名字颜色
    8. 3.8. 评论框背景图片
    9. 3.9. 评论框背景
    10. 3.10. 工具栏背景
    11. 3.11. “发布”按钮背景
    12. 3.12. 评论列表背景
    13. 3.13. 评论数标签
  4. 4. 多说账户设置
    1. 4.1. 评论显示方式
    2. 4.2. 过滤机制
    3. 4.3. 默认头像
  5. 5. 参考资料
|