Hexo的NexT主题个性化:添加文章阅读量

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

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


配置LeanCloud

注册

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

创建新应用

创建一个新应用(类型为JavaScript SDK),点击应用进入;

创建名称为Counter的Class

修改配置文件

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

# add post views
leancloud_visitors:
  enable: true
  app_id: **你的app_id**
  app_key: **你的app_key**

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

Web安全性

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

修改NexT主题文件

添加lean-analytics.swig文件

在主题目录下的\layout\_scripts路径下,新建一个名称为lean-analytics.swig的文件,并添加如下内容:

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变量,按自己的需求相应修改即可。

修改post.swig文件

在主题的layout\_macro路径下,编辑post.swig文件,找到相应的插入位置(大概在98行左右):

插入如下代码

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 %}

修改layout.swig文件

在主题目录下的layout目录下,编辑_layout.swig文件,在</body>的上方(大概在70行左右)插入如下代码:

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

修改语言配置文件

如果你的网站使用的是英语,则只需要编辑主题目录下的languages\en.yml文件,增加post字段如下:

post:
  sticky: Sticky
  posted: Posted on
  visitors: Views // 增加的字段
  ...

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

post:
  posted: 发表于
  visitors: 阅读次数
  ...

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

最后,重新生成并部署你的网站即可。

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

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

安装busuanzi.js脚本

如果你使用的是NexT主题(其他主题类似),打开/theme/next/layout/_partial/footer.swig文件,拷贝下面的代码至文件的开头。

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

显示统计标签

同样编辑/theme/next/layout/_partial/footer.swig文件。

如果你想要显示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

参考资料

为NexT主题添加文章阅读量统计功能