Home >Web Front-end >HTML Tutorial >Duoshuo custom CSS dynamic avatar and Duosuo comments display the little things of User Agent_html/css_WEB-ITnose
Duoshuo custom CSS dynamic avatar and Duosuo comments display the little things of User Agent_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:361105browse
Foreword
Duoshuo is a social comment system that changes the way of interaction between websites and users, and between users. Of course, Disqus may be more influential in everyone's mind, and the reason why I choose to talk more about it is also very simple. In one sentence, it is "a down-to-earth localized comment hosting service." I have seen many friends proudly choose Duoshuo as a third-party comment plug-in when using WordPress. Private experts have also developed some very interesting hidden attributes based on the official API. Because I now use a static blog built by GitHub Hexo, I also hope to make the comments dynamic through Duosuo custom CSS and Duosuo comment display User Agent. The article records the actual steps I performed, and the extended reading and original text will also be marked with references. Links and points of note, embed.default.css and embed.js files are hosted on GitHub. You are welcome to share your experience, and we will improve these simple and interesting little functions together.
Thanks to Duosuo team and those selfless developers
Update history
April 25, 2015 - Fixed Font Awesome icon display, Add dynamic rendering display
April 24, 2015 - First draft
Read the original text - http://wsgzao.github.io/post/duoshuo/
Extended reading
- duoshuo-mod - https://github.com/wsgzao/duoshuo-mod
- Excellent display of custom effects - http://dev.duoshuo.com/docs/4ff1cfd0397309552c000017
- HelloDog Index - http://wsgzao.github.io/index/#Hexo
Tell more about custom CSS
Main reference @V said , his article also shared 9 additional special effects to satisfy everyone’s Duang desires
Duosuo custom CSS to make your Duosuo comments dynamic - http://www.vsay. cn/one-more-custom-css-lets-you-say-comments-city.html
Flip the avatar horizontally
css/*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*/ Say more background customization CSS
The setting steps are super simple. Log in to Duoshuo backend->Settings->Basic settings->Customized CSS
Duo Say comment display UA (User Agent)
Mainly refer to @myhloli and @search客, thank you very much
Say more comment box UA display/blogger mark - http ://myhloli.com/duoshuo-ua-and-admin-tab.html
Display browser and operating system information after replying (Useragent) - http://ssk.91txh.com/209
Localized embed.js
1. Download embed.js
DuoShuo.com/embed.js
If you are lazy, you can download the one I am currently using - http://wsgzao.github.io/embed.js
2. Get Duoshuo ID
Method 1: Log in and comment below the article Click on the avatar to obtain Duoshuo ID
Method 2: Visit Duoshuo backend, http://duoshuo.com/settings/, click on your username, and the following ID address will appear in the address bar
http://duoshuo.com/profile/867394/
3. Modify embed.js locally
Pay attention to modify e.user_id to say more ID, you can customize the ssk front-end display Nickname
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 = '<span class="ua"><span class="sskadmin">R00T</span></span><br><br>'; } else { ssk = '<span class="ua"><span class="sskadmin">R00T</span></span>'; } } else { if (checkMobile()) { ssk = '<br><br>'; } } 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 = '<span class="ua_firefox"><i class="fa fa-globe"></i> Mozilla FireFox' + ' ' + r1[1] } else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_maxthon"><i class="fa fa-globe"></i> Maxthon' + ' ' + r1[1] } else if (r = e.match(/BIDUBrowser([\d]*)\/([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> 百度浏览器' + ' ' + r1[1] } else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser' + ' ' + r1[1] } else if (r = e.match(/UCBrowser([\d]*)\/([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser' + ' ' + r1[1] } else if (r = e.match(/MetaSr/ig)) { outputer = '<span class="ua_sogou"><i class="fa fa-globe"></i> 搜狗浏览器' } else if (r = e.match(/2345Explorer/ig)) { outputer = '<span class="ua_2345explorer"><i class="fa fa-globe"></i> 2345王牌浏览器' } else if (r = e.match(/2345chrome/ig)) { outputer = '<span class="ua_2345chrome"><i class="fa fa-globe"></i> 2345加速浏览器' } else if (r = e.match(/LBBROWSER/ig)) { outputer = '<span class="ua_lbbrowser"><i class="fa fa-globe"></i> 猎豹安全浏览器' } else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_qq"><i class="fa fa-weixin"></i> 微信' + ' ' + r1[1] /*.split('/')[0]*/ } else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_qq"><i class="fa fa-globe"></i> QQ浏览器' + ' ' + r1[1] /*.split('/')[0]*/ } else if (r = e.match(/QQ\/([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_qq"><i class="fa fa-globe"></i> QQ浏览器' + ' ' + r1[1] /*.split('/')[0]*/ } else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_mi"><i class="fa fa-globe"></i> Miui浏览器' + ' ' + r1[1] /*.split('/')[0]*/ } else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_chrome"><i class="fa fa-globe"></i> Chrome' + ' ' + r1[1] /*.split('.')[0]*/ } else if (r = e.match(/safari\/([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_apple"><i class="fa fa-globe"></i> Apple Safari' + ' ' + r1[1] } else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) { var r1 = r[0].split("/"); outputer = '<span class="ua_opera"><i class="fa fa-globe"></i> Opera' + ' ' + r1[1] } else if (r = e.match(/Trident\/7.0/gi)) { outputer = '<span class="ua_ie"><i class="fa fa-globe"></i> Internet Explorer 11' } else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) { outputer = '<span class="ua_ie"><i class="fa fa-globe"></i> Internet Explorer' + ' ' + r[0] /*.replace('MSIE', '').split('.')[0]*/ } else { outputer = '<span class="ua_other"><i class="fa fa-globe"></i> 其它浏览器' } if (checkMobile()) { Mobile = '<br><br>'; } else { Mobile = ''; } return outputer + "</span>" + Mobile;}function os(e) { var os = ''; if (e.match(/win/ig)) { if (e.match(/nt 5.1/ig)) { os = '<span class="os_xp"><i class="fa fa-desktop"></i> Windows XP' } else if (e.match(/nt 6.1/ig)) { os = '<span class="os_7"><i class="fa fa-desktop"></i> Windows 7' } else if (e.match(/nt 6.2/ig)) { os = '<span class="os_8"><i class="fa fa-desktop"></i> Windows 8' } else if (e.match(/nt 6.3/ig)) { os = '<span class="os_8_1"><i class="fa fa-desktop"></i> Windows 8.1' } else if (e.match(/nt 10.0/ig)) { os = '<span class="os_8_1"><i class="fa fa-desktop"></i> Windows 10' } else if (e.match(/nt 6.0/ig)) { os = '<span class="os_vista"><i class="fa fa-desktop"></i> Windows Vista' } else if (e.match(/nt 5/ig)) { os = '<span class="os_2000"><i class="fa fa-desktop"></i> Windows 2000' } else { os = '<span class="os_windows"><i class="fa fa-desktop"></i> Windows' } } else if (e.match(/android/ig)) { os = '<span class="os_android"><i class="fa fa-android"></i> Android' } else if (e.match(/ubuntu/ig)) { os = '<span class="os_ubuntu"><i class="fa fa-desktop"></i> Ubuntu' } else if (e.match(/linux/ig)) { os = '<span class="os_linux"><i class="fa fa-linux"></i> Linux' } else if (e.match(/mac/ig)) { os = '<span class="os_mac"><i class="fa fa-desktop"></i> Mac OS X' } else if (e.match(/unix/ig)) { os = '<span class="os_unix"><i class="fa fa-desktop"></i> Unix' } else if (e.match(/symbian/ig)) { os = '<span class="os_nokia"><i class="fa fa-mobile"></i> Nokia SymbianOS' } else { os = '<span class="os_other"><i class="fa fa-desktop"></i> 其它操作系统' } return os + "</span>";}//显UA结束 4. Upload embed.js
My method is uploaded to GitHub, other methods like Qiniu or cloud hosting can be used
http:// wsgzao.github.io/embed.js
5. Modify the call address of Duosuo
The same goes for other platforms. My own approach is ds.src = '//wsgzao. github.io/embed.js';
js<script type="text/javascript"> var duoshuoQuery = {short_name:"<%= theme.duoshuo_shortname %>"}; (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); })();</script> 6. Add Font Awesome
Official download compressed package - http://fontawesome.io/
Unzip it fonts and css, upload it to the specified directory and introduce the CSS link according to your blog type to take effect
7. Let’s talk about background custom CSS
Please refer to the above method to add more Talk about custom 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*/ Other open source solutions
We welcome everyone’s positive feedback and put forward your own ideas^_^
Make DUOSHUO Show UA - http://git.oschina.net/huhuhuhu/Make-DUOSHUO-Show-UA/tree/master
ua-parser-js - https://github.com/faisalman/ua -parser-js
duoshuo-mod - https://github.com/wsgzao/duoshuo-mod
Front-end recognition
You can hit and test each Kind of UA
Useragent.js - http://zsxsoft.github.io/useragent.js/withimage.html
UAParser.js - http://faisalman.github. io/ua-parser-js/