Mac下Hexo和GitHub-Pages搭建个人博客(四)

本文是《Mac 下 Hexo 和 Github-Pages 搭建个人博客》系列文章的第四篇,也是最后一篇。其他可以写博客的网站,比如:简书CSDN 等网站,都有一个功能就是统计自己博客的阅读量的功能,这个功能 NexT 也提供了,只不过需要配置一下才可以使用。本文就介绍一下统计功能的配置,并介绍一下 NexT 的主题中一些元素的配置。

  1. 为 NexT 主题下的文章增加统计阅读量的功能
  2. NexT 主题中一些元素的配置

为 NexT 主题下的文章增加统计阅读量的功能

为 NexT 中的文章增加统计阅读量的功能的话,需要使用到 LeanCloud 提供的服务。

注册并配置 LeanCloud

注册 LeanCloud

打开 LeanCloud 官网,进行注册并通过邮箱验证以后,登录 LeanCloud,点击头像,进入控制台,如下图所示:



创建应用

点击创建应用,填写新应用名称,如果只是用于个人博客网站的统计功能,选择开发版即可,如下图所示:



创建名为 Counter 的 Class。数据对象的默认 ACL 权限设置,仅在创建 Class 时可以调整,如果想避免后续因为权限的问题导致次数统计显示不正常,建议在此处选择无限制,如下图所示:



Web安全性

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



配置 NexT 站点

修改主题 _config.yml 配置文件

打开在 LeanCloud 中刚刚新建的应用(我的是 lijiankun24.com 应用)。通过 设置 ---> 应用 Key,找到 App IDApp Key,如下图所示:



打开主题配置文件 _config.yml(/hexo/theme/next/_config.yml),添加如下代码:

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

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

网站的浏览次数,即pv;网站的访客数为uv。pv的计算方式是,单个用户连续点击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 文件,在你想要显示的位置放置如下代码即可:

1
2
3
4
<!-- pv 统计量的显示-->
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>
</span>

1
2
3
4
<!-- uv 统计量的显示-->
<span id="busuanzi_container_site_uv">
本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

至此,为 NexT 主题中的博客文章添加了统计阅读量的功能就已经完成。

NexT 主题中一些元素的配置

如果对 Hexo 博客站点的一些地方还有所不满的话,可以参考 NexT 官网,如下图所示:



可以按照官方文档的说明设置 背景动画404公益页面等。


本篇文章至此结束,欢迎转载,转载请注明本文的连接
http://www.lijiankun24.com/Mac下Hexo和GitHub-Pages搭建个人博客4/#more

参考资料

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

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