评论功能——多说插件学习
Posted 一明
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了评论功能——多说插件学习相关的知识,希望对你有一定的参考价值。
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...
以上是关于评论功能——多说插件学习的主要内容,如果未能解决你的问题,请参考以下文章