介绍Hexo博客Next主题如何显示文章阅读量及网站访问量信息

前言

关于Hexo博客的文章阅读量设置问题，常见方案如下：
1、不蒜子，仅局限于在文章页面显示阅读数，首页是不显示的。
2、LeanCloud

设置文章阅读量显示

注册并设置LeanCloud

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

创建应用
创建应用取名test

创建Class
创建Class命名为Counter,ACL权限默认即可

Next主题配置

基本配置
编辑主题目录下的site_page/themes/next/_config.yml配置，修改配置如下：

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: xxx
  app_key: xxx

其中，app_id和app_key在设置–应用Key中获取
Web安全
为了保证应用的统计计数功能仅应用于自己的博客系统，你可以在应用->设置->安全中心的Web安全域名中加入自己的博客域名，以保证数据的调用安全。
确认其他配置

1
2
3

themes\next\layout\_scripts\third-party\lean-analytics.swig  # 确保该文件存在
themes\next\layout\_macro\post.swig                          # 大约171行存在leancloud_visitors相关代码
themes\next\layout\_layout.swig                              # 大约83行引用了lean-analytics.swig文件

重新部署并测试

1
2
3

hexo clean
hexo g
hexo s

在本地访问 http://127.0.0.1:4000

LeanCloud数据检查

通过这些数据可以分析哪些文章访问量高，从而不断优化博客内容，提升网站访问量。

设置网站访问量显示

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

Next主题配置

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: false
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

显示统计标签

如果你想要显示pv统计量，复制以下代码至你想要放置的位置，例如：
修改themes\next\layout_partials\footer.swig文件

<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" rel="external nofollow" href="https://github.com/iissnan/hexo-theme-next">
    NexT.{{ theme.scheme }}
  </a>
**  <span id="busuanzi_container_site_pv" class="theme-info">
&nbsp;&nbsp;|&nbsp;&nbsp;本站总访问量<span id="busuanzi_value_site_pv"></span>次
  </span>
  <span id="busuanzi_container_site_uv" class="theme-info">
&nbsp;&nbsp;|&nbsp;&nbsp;本站访客数<span id="busuanzi_value_site_uv"></span>人次
  </span>
**
</div>