关于Hexo的文章阅读量设置问题，大多数人都是使用不蒜子的代码实现。但是这个方法仅局限于在文章页面显示阅读数，首页是不显示的。

下面介绍如何在首页及文章页面都显示文章的阅读量，显示效果如下：



网上大多数写的是NexT主题的，本文基于该主题设置方式用于gStyle主题实战后编写。
使用该教程时请注意比对自己所使用主题与本文的说明！

配置LeanCloud

注册

打开LeanCloud官网，进入注册页面注册。完成邮箱激活后，点击头像，进入控制台页面，如下：



创建新应用

创建名称为Counter的Class





修改配置文件

编辑网站根目录下的_config.yml文件，添加如下：

1
2
3
4
5
# add post views
leancloud_visitors:
enable: true
app_id: **你的app_id**
app_key: **你的app_key**

其中，app_id和app_key在你所创建的应用的设置->应用Key中。

Web安全性

为了保证应用的统计计数功能仅应用于自己的博客系统，你可以在应用->设置->安全中心的Web安全域名中加入自己的博客域名，以保证数据的调用安全。

修改主题文件

NexT主题常用后缀为.swig格式，小编主题常用.els格式，后文将以.后缀来表示主题常用格式，实战时请替换为自己所使用主题常用后缀格式！

添加lean-analytics.后缀 文件

添加lean-analytics文件，在所使用主题目录下的模块工具(NexT为/layout/_scripts路径，gStyle为\layout\partials路径)目录下，新建一个名称为lean-analytics.后缀

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!-- custom analytics part create by xiamo -->
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>AV.initialize("{{theme.leancloud_visitors.app_id}}", "{{theme.leancloud_visitors.app_key}}");</script>
<script>
function showTime(Counter) {
  var query = new AV.Query(Counter);
    $(".leancloud_visitors").each(function() {
      var url = $(this).attr("id").trim();
      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length == 0) {
            var content = '0 ' + $(document.getElementById(url)).text();
            $(document.getElementById(url)).text(content);
            return;
          }
          for (var i = 0; i < results.length; i++) {
            var object = results[i];
            var content = object.get('time') + ' ' + $(document.getElementById(url)).text();
            $(document.getElementById(url)).text(content);
          }
        },
        error: function(object, error) {
          console.log("Error: " + error.code + " " + error.message);
        }
    });
  });
}
function addCount(Counter) {
  var Counter = AV.Object.extend("Counter");
  url = $(".leancloud_visitors").attr('id').trim();
  title = $(".leancloud_visitors").attr('data-flag-title').trim();
  var query = new AV.Query(Counter);
  query.equalTo("url", url);
  query.find({
    success: function(results) {
      if (results.length > 0) {
        var counter = results[0];
        counter.fetchWhenSave(true);
        counter.increment("time");
        counter.save(null, {
          success: function(counter) {
            var content =  counter.get('time') + ' ' + $(document.getElementById(url)).text();
            $(document.getElementById(url)).text(content);
          },
          error: function(counter, error) {
            console.log('Failed to save Visitor num, with error message: ' + error.message);
          }
        });
      } else {
        var newcounter = new Counter();
        newcounter.set("title", title);
        newcounter.set("url", url);
        newcounter.set("time", 1);
        newcounter.save(null, {
          success: function(newcounter) {
            console.log("newcounter.get('time')="+newcounter.get('time'));
            var content = newcounter.get('time') + ' ' + $(document.getElementById(url)).text();
            $(document.getElementById(url)).text(content);
          },
          error: function(newcounter, error) {
            console.log('Failed to create');
          }
        });
      }
    },
    error: function(error) {
      console.log('Error:' + error.code + " " + error.message);
    }
  });
}
$(function() {
  var Counter = AV.Object.extend("Counter");
  if ($('.leancloud_visitors').length == 1) {
    addCount(Counter);
  } else if ($('.post-title-link').length > 1) {
  showTime(Counter);
  }
}); 
</script>

其中，控制显示的格式的主要为content变量，按自己的需求相应修改即可。

添加leancloud.后缀 文件

在上述路径下添加leancloud.后缀文件，并添加代码，添加的代码请按照主题常用格式编写。
NexT：

1
2
3
4
5
6
{% if theme.leancloud_visitors.enable %}
	&nbsp; | &nbsp;
	<span id="{{ url_for(post.path) }}"class="leancloud_visitors" data-flag-title="{{ post.title }}">
		&nbsp;{{__('post.visitors')}}
	</span>
{% endif %}

gStyle：

1
2
3
4
5
<% if (theme.leancloud_visitors.enable){ %>
	<span id="{{ url_for(post.path) }}"class="leancloud_visitors" data-flag-title="{{ post.title }}">
		<%- {{__('post.visitors')}} %>
	</span>
<% } %>

修改post.后缀 文件

NexT在\layout_macro，我的在\layout路径下，编辑post.后缀文件，找到相应的插入位置插入代码：
gStyle：

1
2
3
<p style="text-align:center">
<img border="1" src="/img/Blog_hexo/hexo_anallytics6.png" width="60%" height="60%"></img>
</p>

NexT：

1
{% include '_scripts/leancloud.后缀' %}

修改layout.后缀 文件

在主题目录下的layout目录下，编辑_layout.后缀文件，在body标签的上方插入代码：

NexT:

1
2
3
{% if theme.leancloud_visitors.enable %}
{% include '_scripts/lean-analytics.swig' %}
{% endif %}

gStyle：

1
2
3
<% if (theme.leancloud_visitors.enable){ %>
<%- partial('partials/lean-analytics') %>
<% } %>

修改语言配置文件

如果你的网站使用的是英语，则只需要编辑主题目录下的languages\语言文件，增加post字段如下：

1
2
3
4
# post:
sticky: Sticky
posted: Posted on
visitors: Views

如果网站使用的是中文，则编辑languages\zh.yml文件，相应的增加

1
2
3
4
# post:
sticky: Sticky
posted: 发表于
visitors: 阅读次数

其他语言与之类似，将以上设置成你希望翻译的字段。

增加网站的浏览次数与访客数量统计功能

网站的浏览次数，即pv；网站的访客数为uv。pv的计算方式是，单个用户连续点击n篇文章，记录n次访问量；uv的计算方式是，单个用户连续点击n篇文章，只记录1次访客数。你可以根据需要添加相应的统计功能。

安装busuanzi.js脚本

如果你使用的是NexT主题（其他主题类似），打开\layout\partial\footer.后缀，拷贝下面的代码至文件的开头。

1
2
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

给文章添加访问统计

编辑\layout\post.后缀，在你想要的位置添加显示代码：

1
2
<!-- 阅读量 -->
<span id="busuanzi_value_page_pv"></span>人阅读

最终效果图如下：



页脚显示统计标签

同样编辑\layout\partial\footer.后缀

如果你想要显示pv统计量，复制以下代码至你想要放置的位置，

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

如果你想要显示uv统计量，复制以下代码至你想要放置的位置，

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

最终效果图如下：



你可以调整一下具体样式来适应你的主题。希望各位都能一次配置成功！

参考资料：http://www.jeyzhang.com/hexo-next-add-post-views.html