动动手指,给你的Hexo站点添加最近访客(多说篇)

下面简单介绍如何给你的Hexo站点添加最近访客,不仅限hexo的网站,其他如wordpress,typecho,emlog等也是可以参考的。
 

引入多说通用JS代码

注意修改您的多说二级域名,每个页面只需引用一次,也就是说你的页面本来就有多说评论的话,就无需再次添加该代码了。正在使用next主题的站长可以参考我的《NexT主题创建“留言”页面》实现指定某些页面添加多说评论系统。
 
<!--多说js加载开始,一个页面只需要加载一次,注意修改您的多说二级域名 -->

<script type="text/javascript">

var duoshuoQuery = {short_name:"您的多说二级域名"};

(function() {

    var ds = document.createElement('script');

    ds.type = 'text/javascript';ds.async = true;

    ds.src = '//static.duoshuo.com/embed.js';

    ds.charset = 'UTF-8';

    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);

})();

</script>

<!--多说js加载结束,一个页面只需要加载一次,注意修改您的多说二级域名 -->
往你想添加的页面增加下面的一小段代码即可。
<div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>
其中
class=“ds-recent-visitors”    //指定显示最近访客容器

data-num-items=“28”    //显示最近访客的数量

data-avatar-size=“42”    //显示最近访客头像尺寸大小

id=“ds-recent-visitors”    //为了调节最近访客样式加的
我的hexo站点是通过直接生成了guestbook的page,然后直接在/guestbook/目录下的index.md添加了上面那段代码实现的。
 
动动手指,给你的Hexo站点添加最近访客(多说篇)
 

修改hexo最近访客样式

通过多说后台管理>设置>基本设置>自定义CSS修改最近访客css样式
 
最近访客竖着排,改成排成一列
#ds-recent-visitors .ds-avatar {float:left}
最近访客头像样式css和评论样式统一
#ds-reset .ds-avatar img,#ds-recent-visitors .ds-avatar img{这里是你定义的多说头像样式css}
最近访客头像样式css和评论样式css分开设置
#ds-reset .ds-avatar img{这里是自定义多说评论头像样式}

#ds-recent-visitors .ds-avatar img{这里是自定义的多说最近访客头像样式css}
我的整个多说自定义css,其中访客样式和评论样式统一
#ds-reset .ds-avatar img,

#ds-recent-visitors .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,

#ds-recent-visitors .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);

}



#ds-thread #ds-reset .ds-textarea-wrapper textarea {

background: url(https://ww4.sinaimg.cn/small/649a4735gw1et7gnhy5fej20zk0m8q3q.jpg) right no-repeat;

}



#ds-recent-visitors .ds-avatar {

float: left

}

/*隐藏多说底部版权*/

#ds-thread #ds-reset .ds-powered-by {

display: none;

}

如何扒别人多说自定义样式

爱美之心人皆有之!有时候看到别人博客的多说样式很好看,总想扒下来搞到自己博客怎么办?貌似扒人家东西有点不道德哦!
按F12打开浏览器调试代码的功能,多说自定义样式css一般在<head></head>里,在
<link type="text/css" rel="stylesheet" href="//static.duoshuo.com/styles/embed.default.css?XXXXXXX.css">

<style type="text/css">这里是多说自定义css</style>



动动手指,给你的Hexo站点添加最近访客(多说篇)
里面,这样你就轻松地扒出来想要的多说自定义CSS样式了。Enjoy It!