码迷,mamicode.com
首页 > 其他好文 > 详细

评论功能——多说插件学习

时间:2016-09-14 12:43:14      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:

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 -->
View Code

 

评论显示样式后台都可以控制,还可以自定义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;}
View Code

ZJ... 

评论功能——多说插件学习

标签:

原文地址:http://www.cnblogs.com/shuai7boy/p/5871195.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!