点点轻博客中加入多说等社会评论方法

2012.09.02 分享 7293 人浏览 留言

昨天把多说评论集成到点点了,感觉就是不错,因为之前都是在wordpress阵营混的,所以大家都不习惯评论需要登录这种模式,上次朋友想要评论,看到要登录就闪了,所以这个还是很必须的。

下面就是方法啦,首先登录多说评论中获取多说代码。

点击创建通用站点

填入相应数据

然后进入后台获取相应代码,比如我的代码如下(记住需要在前后加入{?view.post}这里是代码内容{/view.post}

{?view.post}<!-- Duoshuo Comment BEGIN -->
<div class="ds-thread" data-thread-key="" data-title="" data-author-key="" data-url=""></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"cobmw"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = 'http://static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- Duoshuo Comment END -->{/view.post}

 

然后粘贴到模板中的相应位置中,比如我加在了文章内容之后点点自带的评论之前。

演示 记忆碎片 附一个效果图

很简单的方法,大家有空试试。

 

附多说评论css特效代码

#ds-reset .ds-avatar img{
width:54px;height:54px; /*设置图像的长和宽*/
border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
-webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/
-moz-border-radius:27px;
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
}

#ds-reset .ds-avatar img{
width:54px;height:54px; /*设置图像的长和宽*/
border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
-webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/
-moz-border-radius:27px;
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/
-moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/
box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
transform: rotateZ(360deg);/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}

此段代码只是一个参考,和本站使用的效果有所不同,大家自己扩展吧。

如想多说在点点中是实现评论分级,请转至点点加入多说后实现评论分级

文章地址:https://huilang.me/dd-duoshuo/

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif