本文主要说明不蒜子访问统计在Landscape-plus主题下的应用,理论上下面的方法同样适用于Landscape主题。
关于light主题下不蒜子的应用可以参考:给hexo配置上评论和访问量

安装脚本

这是使用不蒜子的前提,即要使用它必须先添加它的脚本。
打开themes\landscape-plus\layout_partial\after-footer.ejs,在最后添加上下面的脚本即可,当然你也可以添加到 header.ejs 或 footer.ejs 中。目前最新版本2.3。

1
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

网站访问量统计

打开themes/landscape-plus/layout/_partial/footer.ejs,在需要的地方添加下面的代码,可以选择添加任意一种代码或同时添加两种代码。
算法a:pv的方式,单个用户连续点击n篇文章,记录n次访问量。

1
2
3
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

算法b:uv的方式,单个用户连续点击n篇文章,只记录1次访客数。

1
2
3
<span id="busuanzi_container_site_uv">
本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

本站是在Theme by Landscape-plus语句后面添加下面的代码:

1
2
3
4
<!-- 不蒜统计 -->
<br>
<span style="display: inline;" id="busuanzi_container_site_uv">本站总访客数 <span id="busuanzi_value_site_uv" font="微软雅黑" style="color:white"></span> 次</span>
<span style="display: inline;" id="busuanzi_container_site_pv">本站总访问量 <span id="busuanzi_value_site_pv" font="微软雅黑" style="color:white"></span> 次</span>

文章访问量和评论数统计

不蒜子之所以称为极客的算子,正是因为不蒜子自身只提供标签+数字,至于显示的style和css动画效果,任你发挥。

busuanzi_value_site_pv 的作用是异步回填访问数,这个id一定要正确。
busuanzi_container_site_pv的作用是为防止计数服务访问出错或超时(3秒)的情况下,使整个标签自动隐藏显示,带来更好的体验。这个id可以省略。

因此,你也可以使用极简模式:

1
2
3
本站总访问量<span id="busuanzi_value_site_pv"></span>次
本站访客数<span id="busuanzi_value_site_uv"></span>人次
本文总阅读量<span id="busuanzi_value_page_pv"></span>次

修改多说样式

由于landscape-plus已经集成了多说评论,因此,只需要按照给hexo配置上评论和访问量一文中,在多说的管理页面找到配置->自定义文本,找到暂无评论,1条评论,{num}条评论,这几个设置,修改成自己要的格式,也可以参照我的修改,0,1,{num}。

配置文章访问量和评论数

1.修改themes/landscape-plus/layout/_partial/article.ejs,在header标签的末尾添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<% if (post.excerpt && index){ %> 
<% } else { %>
<div class="busuanzi_container_page_pv">
<span class="head-plus">
<i class="fa fa-user"></i>
<span id="busuanzi_value_page_pv">
<i class="fa fa-spinner fa-spin"></i>
</span>次访问 </span>
<span class="head-plus">
<i class="fa fa-comments"></i>
<span class="ds-thread-count" data-thread-key="<%= post.path %>">
<i class="fa fa-spinner fa-spin"></i></span>条评论
</span>
</div>
<% } %>

优化样式

打开themes\landscape-plus\source\css_partial\article.styl,在.article-entry前面添加下面的代码:

1
2
3
4
5
6
7
8
9
10
.busuanzi_container_page_pv
margin:20px 0
color: #817C7C
font-size: 12px
#busuanzi_value_page_pv
padding-left:4px
.head-plus
padding-left:4px
.ds-thread-count
padding-left:4px

参考