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

多说自定义css和hexo最近访客

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

引入多说通用JS代码

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

1
2
3
4
5
6
7
8
9
10
11
12
<!--多说js加载开始,一个页面只需要加载一次,注意修改您的多说二级域名 -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"您的多说二级域名"};
(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>

<!--多说js加载结束,一个页面只需要加载一次,注意修改您的多说二级域名 -->

往你想添加的页面增加下面的一小段代码即可。

1
<div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>

其中

1
2
3
4
class=“ds-recent-visitors”    //指定显示最近访客容器
data-num-items=“28//显示最近访客的数量
data-avatar-size=“42//显示最近访客头像尺寸大小
id=“ds-recent-visitors” //为了调节最近访客样式加的

我的hexo站点是通过直接生成了guestbookpage,然后直接在/guestbook/目录下的index.md添加了上面那段代码实现的。
guestbook目录下的index.md代码

修改hexo最近访客样式

通过多说后台管理>设置>基本设置>自定义CSS修改最近访客css样式

  • 最近访客竖着排,改成排成一列
1
#ds-recent-visitors .ds-avatar {float:left}
  • 最近访客头像样式css和评论样式统一
1
#ds-reset .ds-avatar img,#ds-recent-visitors .ds-avatar img{这里是你定义的多说头像样式css}
  • 最近访客头像样式css和评论样式css分开设置
1
2
#ds-reset .ds-avatar img{这里是自定义多说评论头像样式}
#ds-recent-visitors .ds-avatar img{这里是自定义的多说最近访客头像样式css}
  • 我的整个多说自定义css,其中访客样式和评论样式统一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#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(http://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>里,在

1
2
<link type="text/css" rel="stylesheet" href="http://static.duoshuo.com/styles/embed.default.css?XXXXXXX.css">
<style type="text/css">这里是多说自定义css</style>

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