原文发表在:http://blog.buer.website
相关脚本下载
完整多说 CSS 样式文件: duosuo.css by Yeechong
完整多说 embed-js 文件: embed-js by Yeechong
UA 浏览器标识
修改多说调用地址
主题 Yelee (v3.0) 在 Buer/layout/_partial/comments/duoshuo.ejs 里修改。
var duoshuoQuery = {short_name:"<%=theme.duoshuo%>"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = 'http://blog.buer.website/js/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 文件中引入
主题
Buer
已自带 Font Awesome,无需再引入。
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
多说后台自定义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*/
显示博主标记
分别添加以下代码到你的 embed.js
文件和多说自定义 CSS
,自己多说账户的评论旁将显示博主标记。如果你用的是我上面提供的 embed.js
,那修改好 e.user_id
时博主标记应该已经显示了。
source\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*/
.sskadmin {
background-color: #00a67c!important;
border-color: #01B171!important;
border-radius: 4px;
padding: 0 5px!important;
opacity: .4;
}
.sskadmin:hover {
opacity: 1;
}
不二博主设置
自己评论后点击自己的头像,会跳转到一个页面:
6360067528008712000
6362267528038712065
http://yeechong.duoshuo.com/user-url/?user_id=6362267528038712065
即可查看user_id。
//移动客户端判断结束
//管理员判断开始
function sskadmin(e) {
var ssk = '';
if (e.user_id == 6362267528038712065) {
if (checkMobile()) {
ssk = '<span class="ua"><span class="sskadmin">不二博主</span>';
} else {
ssk = '<span class="ua"><span class="sskadmin">不二博主</span>';
}
} else {
if (checkMobile()) {
ssk = '<br><br>';
}
}
return ssk;
}
个性化 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;}
喜欢按钮样式
透明度,背景,边框等样式调整。
.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;
}
社交账号登陆透明度
#ds-thread #ds-reset .ds-login-buttons {
opacity: .5;
}
#ds-thread #ds-reset .ds-login-buttons:hover {
opacity: 1;
}
用户名颜色
#ds-thread #ds-reset .ds-highlight {
color: #ef7c6c !important;
}
未登录用户名字颜色
颜色与其他登陆用户保持一致;
#ds-thread #ds-reset .ds-user-name {
color: #ef7c6c !important;
}
评论框背景图片
选择合适大小的图片即可,带透明背景的更好。
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background: url("/img/bg.jpg") bottom right no-repeat;}
评论框背景
#ds-thread #ds-reset .ds-textarea-wrapper {
background: rgba(255, 255, 255, .5);
}
工具栏背景
被顶起来的评论
#ds-reset .ds-gradient-bg {
background: #F0F8FF;
}
“发布”按钮背景
#ds-thread #ds-reset .ds-post-button {
background-image: none;
background: #FAEBD7;
text-shadow: none;
}
评论列表背景
#ds-thread #ds-reset li.ds-post {
background: #00000;
}
#ds-thread #ds-reset li.ds-post:hover {
background-color: #C0C0C0 !important;
}
评论数标签
#ds-thread #ds-reset li.ds-tab a.ds-current {
background: #FBFBFF;
}
站长回复标记
在已经保存至本地或是云存储的 embed.js 内最顶部添加如下代码:
//管理员判断开始
function sskadmin(e) {
var ssk = '';
if(e.user_id==【多说id】){
ssk = '<div style="position: absolute;margin-left:300px;"><img src="【改为你自己的图片地址】" width="【图片宽度】" height="【图片高度】"></div>'
}
return ssk;
}
//管理员判断结束
多说账户设置
在多说网站后台做的一些个性化设置。
http://多说用户名.duoshuo.com/admin/settings
评论显示方式
比较喜欢嵌套模式,最大层数设为3,评论每页最多30条。
过滤机制
启用”Akismet智能过滤”,等再过一阵子公开博客后大概能用上吧。
默认头像
不大喜欢多说默认未登录访客的头像,修改为 QQ 匿名头像。
其它开源方案
欢迎大家积极反馈,提出自己的想法^_^
[多说]不本地化embed.js使多说评论显示UA - http://easun.org/blog/archives/make_duoshuo_show_ua.html
多说UA插件 - http://gerald.top/code/duoshuo-ua
ua-parser-js - https://github.com/faisalman/ua-parser-js
- duoshuo-mod - https://github.com/wsgzao/duoshuo-mod
前端识别
大家可以猛击测试各种UA
- Useragent.js - http://zsxsoft.github.io/useragent.js/withimage.html
- UAParser.js - http://faisalman.github.io/ua-parser-js/