title: 多说样式折腾记录 — 添加 UA 浏览器标识、旋转头像等
categories:
- 术业专攻
tags:
- 多说
- CSS
- UA
- JavaScript
- Hexo
date: 2015-09-29 01:24:41
toc:
author:
comments:
original:
permalink: duoshuo-style
---

<h2 id="intro">前言</h2>简单记录自己个性化多说样式的过程，参考的教程和借鉴的代码基本包含在 [参考资料](/2015/09/29/duoshuo-style/#参考资料) 列表中，有不明白的可以试着查阅这些资料。

### 相关下载
> 自用完整多说 CSS 样式文件: [duosuo.css by MOxFIVE][0]
> 自用多说 embed-js 文件: [embed-js by MOxFIVE][0a]
[0]: /resources/duosuo.css
[0a]: /resources/embed.js

## UA 浏览器标识
![UA 浏览器标识][1]
[1]: /resources/UA-label.png

<!-- more -->

### 本地化 embed-js

　1. 先下载我修改好的 [embed.js][0a]，文件源于网页分享，稍作调整: 
> - 去掉了略显累赘的浏览器版本号；
> - 修改了部分浏览器和系统的图标。

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

　3. 个人化 embed.js:
> 将 `e.user_id` 的值修改为你的多说数字 ID。

``` js
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)][2.1] 在 `yelee/layout/_partial/comments/duoshuo.ejs` 里修改。

``` js
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][2]
　　这里介绍下最快捷的方式，把下面代码放入对应 HTML head 头部即可。例如 Hexo 博客主题的通常是在 layout 文件夹下的 Head 文件中引入 [[G]][2b]。
> 主题 [Yelee][2.1] 和 [Yilia][2.2] 已自带 Font Awesome，无需再引入。

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

[2.1]: https://github.com/MOxFIVE/hexo-theme-yelee "简而不减 Hexo 双栏博客主题"
[2.2]: https://github.com/litten/hexo-theme-yilia "一个简洁优雅的 Hexo 主题"

### 添加对应 CSS
　　拷贝以下代码到多说 [后台自定义 CSS][2a] 框中保存。在网友分享基础上设置了透明度，没那么刺眼花哨了，顺便改了一下未识别 UA 的样式。
> CSS 有点繁琐，不清楚如何为这些 UA 设置 Class，只好一个个分开写了。

``` css
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*/
```

### 显示博主标记
![博主标记][1.1]
[1.1]: /resources/root-label.png
　　分别添加以下代码到你的 embed.js 文件和多说自定义 CSS ，自己多说账户的评论旁将显示博主标记。如果你用的是我上面提供的 [embed.js](/resources/embed.js)，那修改好 `e.user_id` 时博主标记应该已经显示了。

``` js
/*博主标记: 添加到 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;
}
```


``` css
/*博主标记 CSS*/
.sskadmin {
    background-color: #00a67c!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.sskadmin:hover {
    opacity: 1;
}

```

[2]: http://fontawesome.io/get-started/ "Easy ways to get Font Awesome 4.4.0 onto your website"
[2a]: http://wsgzao.github.io/post/duoshuo/#多说后台自定义CSS
[2b]: https://github.com/MOxFIVE/M-Hexo-Blog/commit/95dbdbacf628e531902f55714f4dae57f3bab070 "feat: duoshuo style 个性化多说样式"

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

### 旋转头像
![旋转头像](/resources/rotate.gif)
　　源于网友分享，修改了旋转度数，动画时间，内边距。

``` css
/*头像样式*/
#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;}
```

### 通用样式
　　源于网友分享。

``` scss
#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);   
}
```

### 喜欢按钮样式
　　透明度，背景，边框等样式调整。

``` css
.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;
    }
```


### 社交账号登陆透明度

``` css
#ds-thread #ds-reset .ds-login-buttons {
    opacity: .5;
}
#ds-thread #ds-reset .ds-login-buttons:hover {
    opacity: 1;
    }
```

### 评论、文本框字体
　　默认字体偏小，稍作调整。

``` css
#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;
    }
```

### 用户名等超链接颜色

``` css
#ds-thread #ds-reset .ds-highlight {
    color: #ef7c6c !important;
}
```

### 未登录用户名字颜色
　　颜色与其他登陆用户保持一致；

``` css
#ds-thread #ds-reset .ds-user-name {
    color: #ef7c6c !important;
}
```

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

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

### 评论框背景

``` css
#ds-thread #ds-reset .ds-textarea-wrapper {
    background: rgba(255, 255, 255, .5);
}
```

### 工具栏背景

``` css
#ds-reset .ds-gradient-bg {
    background: rgba(255, 255, 255, .5);
}
```

### "发布"按钮背景
　　去掉背景图，修改底色，去掉文字阴影。

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

### 评论列表背景

``` css
#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;
}
```

### 评论数标签

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

## 多说账户设置
　　在多说网站后台做的一些个性化设置。`http://多说用户名.duoshuo.com/admin/settings`
### 评论显示方式
　　比较喜欢嵌套模式，最大层数设为３，评论每页最多30条。

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

### 默认头像
　　不大喜欢多说默认未登录访客的头像，修改为 [QQ 匿名头像](/resources/qq-avatar.png)。
	![默认头像][1]

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