html 评论和浏览图标,多说自定义CSS动感头像跟多说评论显示User Agent的那些小事...

前言

多说是一款社会化评论系统，她改变了网站与用户之间，用户与用户之间的互动方式。当然Disqus在大家心目中可能更加具有影响力，而我选择多说的原因也很简单，一句话概括来说就是“接地气的本地化评论托管服务”。之前看到很多朋友自豪的使用WordPress时会选择多说作为第三方评论插件，民间的高手们也根据官方的API开发出一些十分有趣的隐藏属性。因为现在自己使用GitHub+Hexo搭建的静态Blog，也希望通过多说自定义CSS和多说评论显示User Agent让评论动感起来，文章记录了自己所执行的真实步骤，扩展阅读和原文中也会标注参考链接和注意点，embed.default.css和embed.js文件托管在GitHub上，欢迎大家分享自己的经验，我们一起完善这些简单而有趣的小功能。

感谢多说团队和那些无私的开发者们

更新历史

2015年04月25日 - 修复Font Awesome图标显示，增加动态效果图展示

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

头像水平翻转

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

多说评论显示UA(User Agent)

主要参考@myhloli和@搜索客，灰常感谢

多说评论框UA显示/博主标记 - http://myhloli.com/duoshuo-ua-and-admin-tab.html

多说回复后显示浏览器及操作系统信息(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;

}

if (isMobile) {

return true;

}

return false;

}

//移动客户端判断结束

//管理员判断开始

function sskadmin(e) {

var ssk = '';

if (e.user_id == 867394) {

if (checkMobile()) {

ssk = 'R00T
';

} else {

ssk = 'R00T';

}

} else {

if (checkMobile()) {

ssk = '
';

}

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 = 'Mozilla FireFox' + ' ' + r1[1]

} else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = 'Maxthon' + ' ' + r1[1]

} else if (r = e.match(/BIDUBrowser([\d]*)\/([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = '百度浏览器' + ' ' + r1[1]

} else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = 'UCBrowser' + ' ' + r1[1]

} else if (r = e.match(/UCBrowser([\d]*)\/([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = 'UCBrowser' + ' ' + r1[1]

} else if (r = e.match(/MetaSr/ig)) {

outputer = '搜狗浏览器'

} else if (r = e.match(/2345Explorer/ig)) {

outputer = '2345王牌浏览器'

} else if (r = e.match(/2345chrome/ig)) {

outputer = '2345加速浏览器'

} else if (r = e.match(/LBBROWSER/ig)) {

outputer = '猎豹安全浏览器'

} else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = '微信' + ' ' + r1[1]

/*.split('/')[0]*/

} else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = 'QQ浏览器' + ' ' + r1[1]

/*.split('/')[0]*/

} else if (r = e.match(/QQ\/([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = 'QQ浏览器' + ' ' + r1[1]

/*.split('/')[0]*/

} else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = 'Miui浏览器' + ' ' + r1[1]

/*.split('/')[0]*/

} else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = 'Chrome' + ' ' + r1[1]

/*.split('.')[0]*/

} else if (r = e.match(/safari\/([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = 'Apple Safari' + ' ' + r1[1]

} else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) {

var r1 = r[0].split("/");

outputer = 'Opera' + ' ' + r1[1]

} else if (r = e.match(/Trident\/7.0/gi)) {

outputer = 'Internet Explorer 11'

} else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {

outputer = 'Internet Explorer' + ' ' + r[0]

/*.replace('MSIE', '').split('.')[0]*/

} else {

outputer = '其它浏览器'

}

if (checkMobile()) {

Mobile = '
';

} else {

Mobile = '';

}

return outputer + "" + Mobile;

}

function os(e) {

var os = '';

if (e.match(/win/ig)) {

if (e.match(/nt 5.1/ig)) {

os = 'Windows XP'

} else if (e.match(/nt 6.1/ig)) {

os = 'Windows 7'

} else if (e.match(/nt 6.2/ig)) {

os = 'Windows 8'

} else if (e.match(/nt 6.3/ig)) {

os = 'Windows 8.1'

} else if (e.match(/nt 10.0/ig)) {

os = 'Windows 10'

} else if (e.match(/nt 6.0/ig)) {

os = 'Windows Vista'

} else if (e.match(/nt 5/ig)) {

os = 'Windows 2000'

} else {

os = 'Windows'

}

} else if (e.match(/android/ig)) {

os = 'Android'

} else if (e.match(/ubuntu/ig)) {

os = 'Ubuntu'

} else if (e.match(/linux/ig)) {

os = 'Linux'

} else if (e.match(/mac/ig)) {

os = 'Mac OS X'

} else if (e.match(/unix/ig)) {

os = 'Unix'

} else if (e.match(/symbian/ig)) {

os = 'Nokia SymbianOS'

} else {

os = '其它操作系统'

}

return os + "";

}

//显UA结束

4.上传embed.js

我的做法上传到GitHub，其它类似七牛或者云主机的方法都可以

http://wsgzao.github.io/embed.js

5.修改多说调用地址

其它平台以此类推，我自己的做法ds.src = ‘//wsgzao.github.io/embed.js’;

var duoshuoQuery = {short_name:""};

(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);

})();

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;