Duosuo カスタム CSS 動的アバターと Duosuo コメントは、User Agent_html/css_WEB-ITnose の小さなものを表示します

はじめに

Duoshuo は、ウェブサイトとユーザーの間、およびユーザー間のインタラクションを変えるソーシャル コメント システムです。もちろん、皆さんの心の中では Disqus の方が影響力があるかもしれません。私がそれについて詳しく話すことにした理由も非常に簡単です。一言で言えば、それは「現実的なローカライズされたコメント ホスティング サービス」です。 WordPress を使用する際に、多くの友人が誇らしげに Duoshuo をサードパーティのコメント プラグインとして選択しているのを見てきました。民間の専門家も、公式 API に基づいていくつかの非常に興味深い隠し属性を開発しました。現在 GitHub+Hexo を使用して静的ブログを構築しているので、Duosuo カスタム CSS と Duosuo コメント表示ユーザー エージェントを通じてコメントを動的にしたいと考えています。この記事には私が実行した実際の手順が記録されており、拡張版にもマークされます。参照リンクと注意点については、embed.default.css および embed.js ファイルが GitHub でホストされています。ぜひ、経験を共有して、これらのシンプルで興味深い小さな機能を一緒に改善しましょう。

Duosuo チームと献身的な開発者に感謝します

更新履歴

2015 年 4 月 25 日 - Font Awesome アイコン表示を修正し、ダイナミック レンダリング表示を追加
2015 年 4 月 24 日 - 初稿

原文を読む - http ://wsgzao.github.io/post/duoshuo/

詳細な読書

• duoshuo-mod - https://github.com/wsgzao/duoshuo-mod
• カスタムエフェクトの優れた表示 - http://dev .duoshuo.com/docs/4ff1cfd0397309552c000017
• HelloDog Index - http://wsgzao.github.io/index/#Hexo

カスタム CSS についてもっと話しましょう

主な参照先は @V 氏によると、彼はこの記事みんなの Duang の欲求を満たす追加の 9 つの特殊効果も共有しました

Duosuo のコメントを動的にするための Duosuo カスタム CSS - http://www.vsay.cn/one-more-custom- css-lets-you-say-comments -city.html

アバターを水平に反転します

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*/

Duoshuo 背景カスタム CSS

設定手順は非常に簡単で、Duoshuo 背景にログイン -> 設定 -> 基本設定 -> カスタム CSS

Duoshuoコメント表示UA(ユーザーエージェント)

主に@myhloliと@search客を参照してください、よろしくお願いします

DuoshuoコメントボックスUA表示/ブロガーマーク - http://myhloli.com/duoshuo- ua-and-admin-tab.html

Duoshuo に返信した後、ブラウザーとオペレーティング システムの情報 (Useragent) を表示します - http://ssk.91txh.com/209

ローカリゼーション embed.js

1. embed.js をダウンロードします。

正式バージョンについて詳しく説明します - http://static.duoshuo.com/embed.js

面倒な方は、私が現在使用しているバージョンをダウンロードしてください - http://wsgzao.github.io/ embed .js

2. Duosuo ID を取得します

方法 1: 記事の下にログインしてコメントし、アバターをクリックして Duoshuo ID を取得します

方法 2: Duoshuo バックエンド (http://duoshuo.com/settings/) にアクセスします。ユーザー名をクリックすると、次の ID アドレスがアドレス バーに表示されます

http://duoshuo.com/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 = '<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. embed.js をアップロードします

私の方法は GitHub にアップロードすることですが、Qiniu やクラウド ホストなどの他の方法も使用できます

http:/ /wsgzao.github.io/embed.js

5. Duoshuo

の呼び出しアドレスを変更します。私自身のアプローチは 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. Font Awesome を追加します

公式ダウンロード圧縮パッケージ - http://fontawesome.io/

フォントと CSS を解凍し、ブログのタイプに応じて指定されたディレクトリにアップロードし、CSS リンクを導入します効果を発揮します

7. 背景のカスタム CSS について詳しく説明します

Duoshuo カスタム CSS を追加するには、上記の方法を参照してください

他のオープンソース ソリューション

私たちは皆さんの肯定的なフィードバックを歓迎し、独自のアイデアを提案します^_ ^

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

フロントエンド認識

様々なUAをテストできます

Useragent.js - http://zsxsoft .github.io/useragent.js/withimage.html

UAParser.js - http://faisalman.github.io/ua-parser-js/