title: 多说自定义CSS头像和多说评论显示UA

date: 2015-12-20 19:32:03

categories: Hexo

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

687474703a2f2f692e763265782e636f2f6b4e6c44354532632e706e67

前言

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

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

更新历史

2015年12月20日 - 修复移动端多说评论头像错位，完善细节内容，感谢@橙子

2015年11月29日 - 增加2个非本地化embedded.js让多说显示UA方案

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

2015年04月24日 - 初稿

扩展阅读

多说自定义CSS

主要参考@V说，他的文章中还分享了额外9种特效，满足大家Duang的欲望哈

687474703a2f2f7777332e73696e61696d672e636e2f6c617267652f37323037353130646777316572687263703135627a673230646a30626d376c322e676966

头像水平翻转

/*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: 15px;

}

#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: 32px !important;

height: 32px !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和@搜索客，目前已经独立拆分代码便于长期维护

多说回复后显示浏览器及操作系统信息(Useragent) - http://ssk.91txh.com/209

本地化embed.js

1.下载embed.js

2.获取多说ID

方法一：在文章下方登录后评论点击头像可获取多说ID

3.本地修改embed.js

注意修改e.user_id多说ID，可以自定义ssk前端显示昵称

//HelloDog - http://wsgzao.github.io/post/duoshuo/

//Mobile Start

function checkMobile() {

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;

}

//Mobile End

//Admin Start

function sskadmin(e) {

var ssk = '';

if (e.user_id == 867394) {

if (checkMobile()) {

ssk = 'R00T
';

} else {

ssk = 'R00T';

}

} else {

if (checkMobile()) {

ssk = '
';

}

}

return ssk;

}

//Admin End

//UA Start

function show_ua(string){

console.log(string)

$.ua.set(string);

var sua=$.ua;

if(sua.os.version=='x86_64')sua.os.version='x64';

if (checkMobile()) {

return ''+sua.os.name+' '+sua.os.version+''+sua.browser.name+' '+sua.browser.version+'';

} else {

return ''+sua.os.name+' '+sua.os.version+''+sua.browser.name+' '+sua.browser.version+'';

}

}

//UA End

4.上传embed.js

5.修改多说调用地址

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

var duoshuoQuery = {short_name:""};

(function() {

var ds = document.createElement('script');

ds.type = 'text/javascript';ds.async = true;

ds.src = '//wsgzao.github.io/embed_ua.js';

ds.charset = 'UTF-8';

(document.getElementsByTagName('head')[0]

|| document.getElementsByTagName('body')[0]).appendChild(ds);

})();

7.多说后台自定义CSS

请参考上文方法加入多说自定义CSS

/*UA Start*/

span.this_ua {

background-color: #ccc!important;

border-radius: 4px;

padding: 0 5px!important;

margin: 0 1px!important;

border: 1px solid #BBB!important;

color: #fff;

/*text-transform: Capitalize!important;

float: right!important;

line-height: 18px!important;*/

}

.this_ua.platform.Windows{

background-color: #39b3d7!important;

border-color: #46b8da!important;

}

.this_ua.platform.Linux {

background-color: #3A3A3A!important;

border-color: #1F1F1F!important;

}

.this_ua.platform.Ubuntu {

background-color: #DD4814!important;

border-color: #DD4814!important;

}

.this_ua.platform.Mac {

background-color: #666666!important;

border-color: #666666!important;

}

.this_ua.platform.Android {

background-color: #98C13D!important;

border-color: #98C13D!important;

}

.this_ua.platform.iOS {

background-color: #666666!important;

border-color: #666666!important;

}

.this_ua.browser.Chrome{

background-color: #EE6252!important;

border-color: #EE6252!important;

}

.this_ua.browser.Chromium{

background-color: #EE6252!important;

border-color: #EE6252!important;

}

.this_ua.browser.Firefox{

background-color: #f0ad4e!important;

border-color: #eea236!important;

}

.this_ua.browser.IE{

background-color: #428bca!important;

border-color: #357ebd!important;

}

.this_ua.browser.Edge{

background-color: #428bca!important;

border-color: #357ebd!important;

}

.this_ua.browser.Opera{

background-color: #d9534f!important;

border-color: #d43f3a!important;

}

.this_ua.browser.Maxthon{

background-color: #7373B9!important;

border-color: #7373B9!important;

}

.this_ua.browser.Safari{

background-color: #666666!important;

border-color: #666666!important;

}

.this_ua.sskadmin {

background-color: #00a67c!important;

border-color: #00a67c!important;

}

/*UA End*/

/*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: 15px;

}

#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: 32px !important;

height: 32px !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*/

其它开源方案

欢迎大家积极反馈，提出自己的想法^_^

前端识别

大家可以猛击测试各种UA

新版多说css,GitHub - wsgzao/duoshuo-mod: 多说自定义CSS头像和多说评论显示UA相关推荐

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

    前言 多说是一款社会化评论系统,她改变了网站与用户之间,用户与用户之间的互动方式.当然Disqus在大家心目中可能更加具有影响力,而我选择多说的原因也很简单,一句话概括来说就是"接地气的本地 ...

  2. 多说自定义CSS动感头像和多说评论显示User Agent的那些小事

    前言 多说是一款社会化评论系统,她改变了网站与用户之间,用户与用户之间的互动方式.当然Disqus在大家心目中可能更加具有影响力,而我选择多说的原因也很简单,一句话概括来说就是"接地气的本地 ...

  3. css练习github,10个Github上相见恨晚的CSS 奇技淫巧项目，帮你找到写CSS的灵感！

    You-need-to-know-css 该项目是 CSS 的各种效果实现,尤其是动画效果. 笔者把自己的收获和工作中常用的一些 CSS 小样式总结成这份文档.目前文档一共包含 43 个 CSS 的小 ...

  4. CSS浏览器兼容性的4个解决方案：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件...

    前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...

  5. gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  6. 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

    谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线 原文:谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线 开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什 ...

  7. vue项目html引入css,vue项目引入自定义.css的样式文件

    ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入 在ma ...

  8. 优优css图片欣赏,多说评论上篇之自定义CSS头像

    前言 多说是一款社会化评论系统,它改变了网站与用户之间,用户与用户之间的互动方式.当然Disqus在大家心目中可能更加具有影响力,而多说"接地气的本地化评论托管服务"则让人眼前一亮 ...

  9. css dl图片布局,经典图文列表以及CSS布局切换

    Android:在任务列表隐藏最近打开的app 对于某一个应用,如果不想在最近打开的app列表中留下任何纪录,即按下Home键回到主页,再按任务键的时候,任务列表看不到这个app,在AndroidMa ...

最新文章

  1. 提高智能家居设备的兼容性
  2. 【组队学习】【30期】6. 树模型与集成学习
  3. matlab显示服务器出现意外,Matlab 读取excel文件提示服务器出现意外情况或无法读取问题解决...
  4. SQL 调优专题总结
  5. 全文检索4.5查询语法
  6. 五、线程管理————GCD
  7. VALSE 2020 线上大会简明日程发布(7月31日-8月5日)
  8. jquery 如何获取某个元素中的第几个子元素
  9. 关于开发板不断eth0: link up, 100Mbps, full-duplex, lpa 0x45E1 eth0: link down的问题
  10. SpringCloud第八章：Gateway新一代网关
  11. Smart Link概述
  12. BoomBeach海水效果实现
  13. 从字符串中提取IP子串（C语言）
  14. D-HARRY2020春夏新品
  15. 第二十四课时预习笔记
  16. Mysql单表查询和多表查询
  17. 软件开发 过程管理流程设计
  18. 五、Web应用开发模式
  19. 数据库系统概念 | 第三章：SQL介绍
  20. Swift 中的类和结构体

热门文章

  1. 19 【节点的增删改查】
  2. matlab 传递函数 频率特性曲线,[由频率特性数据获取传递函数参数的一种实现方法] 传递函数的频率特性...
  3. 一个技校生的IT生涯 --- 我和软件的姻缘【0】
  4. 计算机中熵与信息熵的概念及来源
  5. 实现Dota技能冷却效果
  6. html相册自动翻页轮播,jquery+html仿翻页相册功能
  7. MongoDB 单节点升级为副本集高可用集群
  8. 计算机windows10怎么找word,win10的word在哪,windows10word文档
  9. 实变函数--from 水木清华 (www.smth.org)
  10. 新享科技签约京微齐力，UniPro全方位助力国产FPGA研发管理