动动手指,给你的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站点添加最近访客(多说篇)插图1

修改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站点添加最近访客(多说篇)插图2

里面,这样你就轻松地扒出来想要的多说自定义CSS样式了。Enjoy It!

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。