前言
本地化embed.js
1.下载embed.js
多说官方 - http://static.duoshuo测试数据/embed.js
偷懒可以下载我当前使用的 - http://wsgzao.github.io/embed.js
2.获取多说ID
方法一：在文章下方登录后评论点击头像可获取多说ID
方法二：访问多说后台，http://duoshuo测试数据/settings/ ，点击你的用户名，地址栏中会出现如如下的ID地址
http://duoshuo测试数据/profile/867394/
3.本地修改embed.js
注意修改e.user_id多说ID，可以自定义ssk前端显示昵称
js//移动客户端判断开始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;}//移动客户端判断结束//管理员判断开始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';
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
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; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important;}.ua_2345explorer { background-color: #2478B8!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important;}.ua_2345chrome { background-color: #F9D024!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important;}.ua_mi { background-color: #FF4A00!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important;}.ua_lbbrowser { background-color: #FC9D2E!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important;}.ua_chrome { background-color: #EE6252!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important;}.ua_qq { background-color: #3D88A8!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important;}.ua_apple { background-color: #E95620!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important;}.ua_opera { background-color: #d9534f!important; border-color: #d43f3a!important; border-radius: 4px; padding: 0 5px!important;}.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;}.os_android { background-color: #98C13D!important; border-color: #01B171!important; border-radius: 4px; padding: 0 5px!important;}.os_ubuntu { background-color: #DD4814!important; border-color: #01B171!important; border-radius: 4px; padding: 0 5px!important;}.os_linux { background-color: #3A3A3A!important; border-color: #1F1F1F!important; border-radius: 4px; padding: 0 5px!important;}.os_mac { background-color: #666666!important; border-color: #1F1F1F!important; border-radius: 4px; padding: 0 5px!important;}.os_unix { background-color: #006600!important; border-color: #1F1F1F!important; border-radius: 4px; padding: 0 5px!important;}.os_nokia { background-color: #014485!important; border-color: #1F1F1F!important; border-radius: 4px; padding: 0 5px!important;}.sskadmin { background-color: #00a67c!important; border-color: #01B171!important; border-radius: 4px; padding: 0 5px!important;}/*UA End*/ 其它开源方案
欢迎大家积极反馈，提出自己的想法^_^
Make DUOSHUO Show UA - http://git.oschina.net/huhuhuhu/Make-DUOSHUO-Show-UA/tree/master
ua-parser-js - https://github测试数据/faisalman/ua-parser-js
duoshuo-mod - https://github测试数据/wsgzao/duoshuo-mod
前端识别
大家可以猛击测试各种UA
Useragent.js - http://zsxsoft.github.io/useragent.js/withimage.html
UAParser.js - http://faisalman.github.io/ua-parser-js/
查看更多关于多说自定义CSS动感头像和多说评论显示UserAgent的那些小事_html/css_WEB-ITn的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did107856