hexo 博客的第三方功能

趁阳光正好。趁微风不噪。趁繁花还未开至靡。趁现在还年轻,还可以走很长的路。


  多说评论是静态博客常用的评论,而且还提供了丰富的样式。下图就是其中一种效果图,摘自网络

多说的自定义样式可以显示访问者的浏览器和系统信息的显示,可以增加评论的积极性和趣味性,之前迷糊了很久,今天详细完整的把这个记录下来,大致流程有以下几步

一、多说系统

国内普遍使用的评论系统,这里为了增加多说的 UA 等信息

1.1 本地化多说的 embed.js

先说说这个 embed.js 是个啥,多说社会化评论框核心脚本 embed.js 文件是个多说官方提供的公用文件,如果官方渠道过于拥挤,或者服务器故障(这个已经有过了~~),就会导致页面加载过慢或者完全无法加载,如果我们将其下载下来放到自己的空间上,就会提高加载速度,同时也可以对多说评论框做一些个性化调整

1、下载 embed.js

  • 多说官方:http://static.duoshuo.com/embed.js
  • 然后保存下来,上传到自己的的空间里,你可以上传到 github 上,也可以上传到第三方的云存储上。

2、修改多说的调用地址

# 修改下载下来的 embed.js 中的调用地址
ds.src = '你的存放路径/embed.js';

3、验证
再次访问刷新页面,如果多说评论是正常可用的,那么就证明 embed.js 本地化成功

1.2、自定义多说后台自定义CSS样式

同样的,多说允许自定义评论框的样式,效果图中很明显的样式可以自定义

打开多说后台的【设置-基本设置-自定义 css】即可

我目前用的样式

/*Head Start*/
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {
border: 0px;
color: #6D6D6B;
text-shadow: none;
background: #F3F3F3;
}

#ds-thread #ds-reset .ds-highlight {
font-family: Microsoft YaHei, "Helvetica Neue", Helvetica, Arial, Sans-serif;
;font-size: 100%;
color: #6D6D6B !important;
}

#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {
color: #696a52;
background: #F2F2F2;
}

#ds-thread #ds-reset a.ds-highlight:hover {
color: #696a52 !important;
}

#ds-thread {
padding-left: 15px;
}

#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {
overflow: visible;
}

#ds-thread #ds-reset .ds-post-self {
padding: 10px 0 10px 10px;
}

#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {
border: 0 !important;
}

#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {
top: 15px;
left: -20px;
padding: 5px;
width: 36px;
height: 36px;
box-shadow: -1px 0 1px rgba(0,0,0,.15) inset;
border-radius: 46px;
background: #FAFAFA;
}

#ds-thread .ds-avatar a {
display: inline-block;
padding: 1px;
width: 32px;
height: 32px;
border: 1px solid #b9baa6;
border-radius: 50%;
background-color: #fff !important;
}

#ds-thread .ds-avatar a:hover {
}

#ds-thread .ds-avatar > img {
margin: 2px 0 0 2px;
}

#ds-thread #ds-reset .ds-replybox {
box-shadow: none;
}

#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {
left: 0;
top: 0;
padding: 0;
width: 32px !important;
height: 32px !important;
background: none;
box-shadow: none;
}

#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {
width: 32px !important;
height: 32px !important;
border-radius: 50%;
}

#ds-reset .ds-replybox a.ds-avatar,
#ds-reset .ds-replybox .ds-avatar img {
padding: 0;
width: 32px !important;
height: 32px !important;
border-radius: 5px;
}

#ds-reset .ds-avatar img {
width: 32px !important;
height: 32px !important;
border-radius: 32px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
-webkit-transition: .8s all ease-in-out;
-moz-transition: .4s all ease-in-out;
-o-transition: .4s all ease-in-out;
-ms-transition: .4s all ease-in-out;
transition: .4s all ease-in-out;
}

.ds-post-self:hover .ds-avatar img {
-webkit-transform: rotateX(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

#ds-thread #ds-reset .ds-comment-body {
-webkit-transition-delay: initial;
-webkit-transition-duration: 0.4s;
-webkit-transition-property: all;
-webkit-transition-timing-function: initial;
background: #F7F7F7;
padding: 15px 15px 15px 47px;
border-radius: 5px;
box-shadow: #B8B9B9 0 1px 3px;
border: white 1px solid;
}

#ds-thread #ds-reset ul.ds-children .ds-comment-body {
padding-left: 15px;
}

#ds-thread #ds-reset .ds-comment-body p {
color: #787968;
}

#ds-thread #ds-reset .ds-comments {
border-bottom: 0px;
}

#ds-thread #ds-reset .ds-powered-by {
display: none;
}

#ds-thread #ds-reset .ds-comments a.ds-user-name {
font-weight: normal;
color: #3D3D3D !important;
}

#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {
color: #D32 !important;
}

#ds-thread #ds-reset #ds-bubble {
display: none !important;
}

#ds-thread #ds-reset #ds-hot-posts {
border: 0;
}

#ds-reset #ds-hot-posts .ds-gradient-bg {
background: none;
}

#ds-thread #ds-reset .ds-comment-body:hover {
background-color: #F1F1F1;
-webkit-transition-delay: initial;
-webkit-transition-duration: 0.4s;
-webkit-transition-property: all;
-webkit-transition-timing-function: initial;
}
/*Head End*/

1.3、多说显示 UA

UA,即显示评论者所使用的代理信息(如 操作系统、浏览器)等,效果如上图

这里 Next 主题的作者已经帮我们集成好了,只需要编辑主题配置文件_congig.yml 如下:

# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
ua_enable: true
admin_enable: true
user_id: xxxxxx
admin_nickname: Root

只要设置 ua_enabletrue 即可显示 UA 信息。 admin_enable 是用于显示 Root 文字,表明评论者是博主【默认显示的是博主,我给改成 Root 了】,此字段需要同时配置 user_id。 请访问 多说开发者中心,登录并访问 我的主页 获取 user_id , 此 ID 是网址最后那串数字。

最后上一张我的多说评论

二、不蒜子统计

根据不蒜子的介绍,使用起来非常简单。只需要两行代码(一行脚本、一行HTML显示)搞定计数。

2.1 增加代码

在引入 JS 的地方添加下列脚本即可,以我的 hexo 博客为例:themes/next/layout/_partials/footer.swig

# 在文件顶部引用
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

<div class="copyright">
<span id="busuanzi_container_page_pv">
本文阅读量:<span id="busuanzi_value_page_pv"></span>
</span>
&nbsp; | &nbsp;
<span id="busuanzi_container_site_pv">
本站访问量:
<span id="busuanzi_value_site_pv"></span>
</span>
</div>

效果如下

  

参考阅读