評論功能——多說插件學習

First 進入官方網站:http://duoshuo.com/,選擇我要安裝，填寫好信息后賦值代碼到項目就OK了

如下是我復制的代碼:

  <!-- 多說評論框 start -->
    <!--請將此處替換成文章在你的站點中的ID-->
    <div class="ds-thread" data-thread-key="messageBoard2" data-title="請替換成文章的標題" data-url="請替換成文章的網址"></div>
    <!-- 多說評論框 end -->
    <!-- 多說公共JS代碼 start (一個網頁只需插入一次) -->
    <script type="text/javascript">
        var duoshuoQuery = { short_name: "shuai7boy" };
        (function () {
            var ds = document.createElement('script');
            ds.type = 'text/javascript'; ds.async = true;
            ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
            ds.charset = 'UTF-8';
            (document.getElementsByTagName('head')[0]
             || document.getElementsByTagName('body')[0]).appendChild(ds);
        })();
    </script>
    <!-- 多說公共JS代碼 end -->

 

評論顯示樣式后台都可以控制，還可以自定義css樣式，下面是我自定義樣式實現的一種效果：

實現css：

#ds-reset .ds-avatar{background:none !important; box-shadow:none !important;}

#ds-reset .ds-avatar img , #ds-thread #ds-reset ul.ds-children .ds-avatar img{width:50px !important;height: 50px !important;-webkit-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding:3px;border: 1px solid #ddd;background: #fff;}

.ds-post:hover .ds-avatar img{transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);border-radius:30px !important;}

#ds-reset .ds-avatar img:hover{transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);border-radius:30px !important;}

#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}

#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}

.ds-post:hover{background:#eee !important;}

#ds-thread #ds-reset ul.ds-children .ds-avatar{width:50px !important;}

#ds-thread #ds-reset .ds-replybox{padding: 0 0 0 80px !important;}

#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body{margin-left: 68px !important;}

#ds-recent-comments li.ds-comment:nth-of-type(1){border:none !important;}

ZJ...