[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","wsgzao","page",1,"limit",20,"total","id","16736","avatar_url","https://avatars.githubusercontent.com/u/2049845?v=3","githubUsername","create_at","2015-04-25 06:01:33.62","score",5,"topic_count","reply_count",0,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":47,"_48":49,"_25":50,"_51":52},"11883","author_id","tab","share","content","![](http://i.v2ex.co/kNlD5E2c.png)\r\n\r\n## 前言\r\n多说是一款社会化评论系统，她改变了网站与用户之间，用户与用户之间的互动方式。当然Disqus在大家心目中可能更加具有影响力，而我选择多说的原因也很简单，一句话概括来说就是“接地气的本地化评论托管服务”。之前看到很多朋友自豪的使用WordPress时会选择多说作为第三方评论插件，民间的高手们也根据官方的API开发出一些十分有趣的隐藏属性。因为现在自己使用GitHub+Hexo搭建的静态Blog，也希望通过多说自定义CSS和多说评论显示User Agent让评论动感起来，文章记录了自己所执行的真实步骤，扩展阅读和原文中也会标注参考链接和注意点，embed.default.css和embed.js文件托管在GitHub上，欢迎大家分享自己的经验，我们一起完善这些简单而有趣的小功能。\r\n\r\n>感谢多说团队和那些无私的开发者们\r\n\r\n---\r\n\r\n## 更新历史\r\n\r\n2015年04月25日 - 修复Font Awesome图标显示，增加动态效果图展示\r\n2015年04月24日 - 初稿\r\n\r\n阅读原文 - http://wsgzao.github.io/post/duoshuo/\r\n\r\n扩展阅读\r\n\r\n- duoshuo-mod - https://github.com/wsgzao/duoshuo-mod\r\n- 出色的自定义效果展示 - http://dev.duoshuo.com/docs/4ff1cfd0397309552c000017\r\n- HelloDog Index - http://wsgzao.github.io/index/#Hexo\r\n\r\n---\r\n\r\n## 多说自定义CSS\r\n\r\n>主要参考@V说，他的文章中还分享了额外9种特效，满足大家Duang的欲望哈\r\n\r\n多说自定义CSS 让你的多说评论动感起来 - http://www.vsay.cn/one-more-custom-css-lets-you-say-comments-city.html\r\n\r\n![](http://ww3.sinaimg.cn/large/7207510dgw1erhrcp15bzg20dj0bm7l2.gif)\r\n\r\n### 头像水平翻转\r\n\r\n``` css\r\n/*Head Start*/\r\n#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {\r\n border: 0px;\r\n color: #6D6D6B;\r\n text-shadow: none;\r\n background: #F3F3F3;\r\n}\r\n\r\n#ds-thread #ds-reset .ds-highlight {\r\n font-family: Microsoft YaHei, \"Helvetica Neue\", Helvetica, Arial, Sans-serif;\r\n ;font-size: 100%;\r\n color: #6D6D6B !important;\r\n}\r\n\r\n#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {\r\n color: #696a52;\r\n background: #F2F2F2;\r\n}\r\n\r\n#ds-thread #ds-reset a.ds-highlight:hover {\r\n color: #696a52 !important;\r\n}\r\n\r\n#ds-thread {\r\n padding-left: 30px;\r\n}\r\n\r\n#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {\r\n overflow: visible;\r\n}\r\n\r\n#ds-thread #ds-reset .ds-post-self {\r\n padding: 10px 0 10px 10px;\r\n}\r\n\r\n#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {\r\n border: 0 !important;\r\n}\r\n\r\n#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {\r\n top: 15px;\r\n left: -20px;\r\n padding: 5px;\r\n width: 36px;\r\n height: 36px;\r\n box-shadow: -1px 0 1px rgba(0,0,0,.15) inset;\r\n border-radius: 46px;\r\n background: #FAFAFA;\r\n}\r\n\r\n#ds-thread .ds-avatar a {\r\n display: inline-block;\r\n padding: 1px;\r\n width: 32px;\r\n height: 32px;\r\n border: 1px solid #b9baa6;\r\n border-radius: 50%;\r\n background-color: #fff !important;\r\n}\r\n\r\n#ds-thread .ds-avatar a:hover {\r\n}\r\n\r\n#ds-thread .ds-avatar > img {\r\n margin: 2px 0 0 2px;\r\n}\r\n\r\n#ds-thread #ds-reset .ds-replybox {\r\n box-shadow: none;\r\n}\r\n\r\n#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,\r\n#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {\r\n left: 0;\r\n top: 0;\r\n padding: 0;\r\n width: 32px !important;\r\n height: 32px !important;\r\n background: none;\r\n box-shadow: none;\r\n}\r\n\r\n#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {\r\n width: 32px !important;\r\n height: 32px !important;\r\n border-radius: 50%;\r\n}\r\n\r\n#ds-reset .ds-replybox a.ds-avatar,\r\n#ds-reset .ds-replybox .ds-avatar img {\r\n padding: 0;\r\n width: 50px !important;\r\n height: 50px !important;\r\n border-radius: 5px;\r\n}\r\n\r\n#ds-reset .ds-avatar img {\r\n width: 32px !important;\r\n height: 32px !important;\r\n border-radius: 32px;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);\r\n -webkit-transition: .8s all ease-in-out;\r\n -moz-transition: .4s all ease-in-out;\r\n -o-transition: .4s all ease-in-out;\r\n -ms-transition: .4s all ease-in-out;\r\n transition: .4s all ease-in-out;\r\n}\r\n\r\n.ds-post-self:hover .ds-avatar img {\r\n -webkit-transform: rotateX(360deg);\r\n -moz-transform: rotate(360deg);\r\n -o-transform: rotate(360deg);\r\n -ms-transform: rotate(360deg);\r\n transform: rotate(360deg);\r\n}\r\n\r\n#ds-thread #ds-reset .ds-comment-body {\r\n -webkit-transition-delay: initial;\r\n -webkit-transition-duration: 0.4s;\r\n -webkit-transition-property: all;\r\n -webkit-transition-timing-function: initial;\r\n background: #F7F7F7;\r\n padding: 15px 15px 15px 47px;\r\n border-radius: 5px;\r\n box-shadow: #B8B9B9 0 1px 3px;\r\n border: white 1px solid;\r\n}\r\n\r\n#ds-thread #ds-reset ul.ds-children .ds-comment-body {\r\n padding-left: 15px;\r\n}\r\n\r\n#ds-thread #ds-reset .ds-comment-body p {\r\n color: #787968;\r\n}\r\n\r\n#ds-thread #ds-reset .ds-comments {\r\n border-bottom: 0px;\r\n}\r\n\r\n#ds-thread #ds-reset .ds-powered-by {\r\n display: none;\r\n}\r\n\r\n#ds-thread #ds-reset .ds-comments a.ds-user-name {\r\n font-weight: normal;\r\n color: #3D3D3D !important;\r\n}\r\n\r\n#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {\r\n color: #D32 !important;\r\n}\r\n\r\n#ds-thread #ds-reset #ds-bubble {\r\n display: none !important;\r\n}\r\n\r\n#ds-thread #ds-reset #ds-hot-posts {\r\n border: 0;\r\n}\r\n\r\n#ds-reset #ds-hot-posts .ds-gradient-bg {\r\n background: none;\r\n}\r\n\r\n#ds-thread #ds-reset .ds-comment-body:hover {\r\n background-color: #F1F1F1;\r\n -webkit-transition-delay: initial;\r\n -webkit-transition-duration: 0.4s;\r\n -webkit-transition-property: all;\r\n -webkit-transition-timing-function: initial;\r\n}\r\n/*Head End*/\r\n```\r\n\r\n### 多说后台自定义CSS\r\n\r\n>设置步骤超级简单，登录多说后台->设置->基本设置->自定义CSS\r\n\r\n![](http://ww1.sinaimg.cn/large/7207510dgw1ergrzty3c5j20mm0i4dj7.jpg)\r\n\r\n## 多说评论显示UA(User Agent)\r\n\r\n>主要参考@myhloli和@搜索客，灰常感谢\r\n\r\n多说评论框UA显示/博主标记 - http://myhloli.com/duoshuo-ua-and-admin-tab.html\r\n\r\n多说回复后显示浏览器及操作系统信息（Useragent） - http://ssk.91txh.com/209\r\n\r\n### 本地化embed.js\r\n\r\n1.下载embed.js\r\n\r\n多说官方 - http://static.duoshuo.com/embed.js\r\n\r\n偷懒可以下载我当前使用的 - http://wsgzao.github.io/embed.js\r\n\r\n2.获取多说ID\r\n\r\n方法一：在文章下方登录后评论点击头像可获取多说ID\r\n\r\n方法二：访问多说后台，http://duoshuo.com/settings/ ，点击你的用户名，地址栏中会出现如如下的ID地址\r\nhttp://duoshuo.com/profile/867394/\r\n\r\n3.本地修改embed.js\r\n\r\n>注意修改e.user_id多说ID，可以自定义ssk前端显示昵称\r\n\r\n``` js\r\n//移动客户端判断开始\r\nfunction checkMobile() {\r\n var isiPad = navigator.userAgent.match(/iPad/i) != null;\r\n if (isiPad) {\r\n return false;\r\n }\r\n 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;\r\n if (isMobile) {\r\n return true;\r\n }\r\n return false;\r\n}\r\n//移动客户端判断结束\r\n//管理员判断开始\r\nfunction sskadmin(e) {\r\n var ssk = '';\r\n if (e.user_id == 867394) {\r\n if (checkMobile()) {\r\n ssk = 'R00T

';\r\n } else {\r\n ssk = 'R00T';\r\n }\r\n } else {\r\n if (checkMobile()) {\r\n ssk = '

';\r\n }\r\n }\r\n return ssk;\r\n}\r\n//管理员判断结束\r\n//显UA开始\r\nfunction ua(e) {\r\n var r = new Array;\r\n var outputer = '';\r\n if (r = e.match(/FireFox\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' Mozilla FireFox' + ' ' + r1[1]\r\n } else if (r = e.match(/Maxthon([\\d]*)\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' Maxthon' + ' ' + r1[1]\r\n } else if (r = e.match(/BIDUBrowser([\\d]*)\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' 百度浏览器' + ' ' + r1[1]\r\n } else if (r = e.match(/UBrowser([\\d]*)\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' UCBrowser' + ' ' + r1[1]\r\n } else if (r = e.match(/UCBrowser([\\d]*)\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' UCBrowser' + ' ' + r1[1]\r\n } else if (r = e.match(/MetaSr/ig)) {\r\n outputer = ' 搜狗浏览器'\r\n } else if (r = e.match(/2345Explorer/ig)) {\r\n outputer = ' 2345王牌浏览器'\r\n } else if (r = e.match(/2345chrome/ig)) {\r\n outputer = ' 2345加速浏览器'\r\n } else if (r = e.match(/LBBROWSER/ig)) {\r\n outputer = ' 猎豹安全浏览器'\r\n } else if (r = e.match(/MicroMessenger\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' 微信' + ' ' + r1[1]\r\n /*.split('/')[0]*/\r\n } else if (r = e.match(/QQBrowser\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' QQ浏览器' + ' ' + r1[1]\r\n /*.split('/')[0]*/\r\n } else if (r = e.match(/QQ\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' QQ浏览器' + ' ' + r1[1]\r\n /*.split('/')[0]*/\r\n } else if (r = e.match(/MiuiBrowser\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' Miui浏览器' + ' ' + r1[1]\r\n /*.split('/')[0]*/\r\n } else if (r = e.match(/Chrome([\\d]*)\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' Chrome' + ' ' + r1[1]\r\n /*.split('.')[0]*/\r\n } else if (r = e.match(/safari\\/([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' Apple Safari' + ' ' + r1[1]\r\n } else if (r = e.match(/Opera[\\s|\\/]([^\\s]+)/ig)) {\r\n var r1 = r[0].split(\"/\");\r\n outputer = ' Opera' + ' ' + r1[1]\r\n } else if (r = e.match(/Trident\\/7.0/gi)) {\r\n outputer = ' Internet Explorer 11'\r\n } else if (r = e.match(/MSIE\\s([^\\s|;]+)/gi)) {\r\n outputer = ' Internet Explorer' + ' ' + r[0]\r\n /*.replace('MSIE', '').split('.')[0]*/\r\n } else {\r\n outputer = ' 其它浏览器'\r\n }\r\n if (checkMobile()) {\r\n Mobile = '

';\r\n } else {\r\n Mobile = '';\r\n }\r\n return outputer + \"\" + Mobile;\r\n}\r\nfunction os(e) {\r\n var os = '';\r\n if (e.match(/win/ig)) {\r\n if (e.match(/nt 5.1/ig)) {\r\n os = ' Windows XP'\r\n } else if (e.match(/nt 6.1/ig)) {\r\n os = ' Windows 7'\r\n } else if (e.match(/nt 6.2/ig)) {\r\n os = ' Windows 8'\r\n } else if (e.match(/nt 6.3/ig)) {\r\n os = ' Windows 8.1'\r\n } else if (e.match(/nt 10.0/ig)) {\r\n os = ' Windows 10'\r\n } else if (e.match(/nt 6.0/ig)) {\r\n os = ' Windows Vista'\r\n } else if (e.match(/nt 5/ig)) {\r\n os = ' Windows 2000'\r\n } else {\r\n os = ' Windows'\r\n }\r\n } else if (e.match(/android/ig)) {\r\n os = ' Android'\r\n } else if (e.match(/ubuntu/ig)) {\r\n os = ' Ubuntu'\r\n } else if (e.match(/linux/ig)) {\r\n os = ' Linux'\r\n } else if (e.match(/mac/ig)) {\r\n os = ' Mac OS X'\r\n } else if (e.match(/unix/ig)) {\r\n os = ' Unix'\r\n } else if (e.match(/symbian/ig)) {\r\n os = ' Nokia SymbianOS'\r\n } else {\r\n os = ' 其它操作系统'\r\n }\r\n return os + \"\";\r\n}\r\n//显UA结束\r\n```\r\n\r\n4.上传embed.js\r\n\r\n我的做法上传到GitHub，其它类似七牛或者云主机的方法都可以\r\nhttp://wsgzao.github.io/embed.js\r\n\r\n5.修改多说调用地址\r\n\r\n>其它平台以此类推，我自己的做法ds.src = '//wsgzao.github.io/embed.js';\r\n\r\n``` js\r\n\r\n```\r\n\r\n6.增加Font Awesome\r\n\r\n官方下载压缩包 - http://fontawesome.io/\r\n解压其中的fonts和css，根据你的Blog类型上传至指定目录引入CSS链接即可生效\r\n\r\n7.多说后台自定义CSS\r\n\r\n>请参考上文方法加入多说自定义CSS\r\n\r\n``` css\r\n/*UA Start*/\r\nspan.ua {\r\n margin: 0 1px!important;\r\n color: #FFFFFF!important;\r\n /*text-transform: Capitalize!important;\r\n float: right!important;\r\n line-height: 18px!important;*/;\r\n}\r\n\r\n.ua_other.os_other {\r\n background-color: #ccc!important;\r\n color: #fff;\r\n border: 1px solid #BBB!important;\r\n border-radius: 4px;\r\n}\r\n\r\n.ua_ie {\r\n background-color: #428bca!important;\r\n border-color: #357ebd!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_firefox {\r\n background-color: #f0ad4e!important;\r\n border-color: #eea236!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_maxthon {\r\n background-color: #7373B9!important;\r\n border-color: #7373B9!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_ucweb {\r\n background-color: #FF740F!important;\r\n border-color: #d43f3a!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_sogou {\r\n background-color: #78ACE9!important;\r\n border-color: #4cae4c!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_2345explorer {\r\n background-color: #2478B8!important;\r\n border-color: #4cae4c!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_2345chrome {\r\n background-color: #F9D024!important;\r\n border-color: #4cae4c!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_mi {\r\n background-color: #FF4A00!important;\r\n border-color: #4cae4c!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_lbbrowser {\r\n background-color: #FC9D2E!important;\r\n border-color: #4cae4c!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_chrome {\r\n background-color: #EE6252!important;\r\n border-color: #4cae4c!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_qq {\r\n background-color: #3D88A8!important;\r\n border-color: #4cae4c!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_apple {\r\n background-color: #E95620!important;\r\n border-color: #4cae4c!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.ua_opera {\r\n background-color: #d9534f!important;\r\n border-color: #d43f3a!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {\r\n background-color: #39b3d7!important;\r\n border-color: #46b8da!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.os_android {\r\n background-color: #98C13D!important;\r\n border-color: #01B171!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.os_ubuntu {\r\n background-color: #DD4814!important;\r\n border-color: #01B171!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.os_linux {\r\n background-color: #3A3A3A!important;\r\n border-color: #1F1F1F!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.os_mac {\r\n background-color: #666666!important;\r\n border-color: #1F1F1F!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.os_unix {\r\n background-color: #006600!important;\r\n border-color: #1F1F1F!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.os_nokia {\r\n background-color: #014485!important;\r\n border-color: #1F1F1F!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n\r\n.sskadmin {\r\n background-color: #00a67c!important;\r\n border-color: #01B171!important;\r\n border-radius: 4px;\r\n padding: 0 5px!important;\r\n}\r\n/*UA End*/\r\n```\r\n\r\n## 其它开源方案\r\n\r\n>欢迎大家积极反馈，提出自己的想法^_^\r\n\r\nMake DUOSHUO Show UA - http://git.oschina.net/huhuhuhu/Make-DUOSHUO-Show-UA/tree/master\r\n\r\nua-parser-js - https://github.com/faisalman/ua-parser-js\r\n\r\nduoshuo-mod - https://github.com/wsgzao/duoshuo-mod\r\n\r\n### 前端识别\r\n\r\n>大家可以猛击测试各种UA\r\n\r\nUseragent.js - http://zsxsoft.github.io/useragent.js/withimage.html\r\n\r\nUAParser.js - http://faisalman.github.io/ua-parser-js/","title","多说自定义CSS动感头像和多说评论显示User Agent的那些小事","last_reply_at","2015-04-28 02:44:57.295","good","top",3,"visit_count",5232,"2015-04-25 06:02:18.137","author",{"_13":14,"_22":23}]