Hexo添加文章阅读量统计功能

前言

本教程以next主题为例进行演示说明，但是对于以next主题为基础修改的主题或者其他类似主题也是同样适用的。

配置LeanCloud

首先注册LeanCloud帐号,网址:https://leancloud.cn.

创建应用

然后依次是：新应用名称(自定义) → 选中开发版 → 点击创建即可。

创建Class

在创建的应用上点击存储.
数据栏中，_开头的都是系统预定义好的表，为了区分，新建一张表来保存数据。为了保证对NexT主题的修改兼容，新建Class名字必须为 Counter。为了避免权限问题导致次数统计显示不正常，选择无限制，创建Class。

获取App ID和App Key

Class创建完成后，选择界面最左侧的设置 → 应用Key，复制App ID和App Key

配置主题

修改_config.yml文件

打开博客根目录/themes/next/下的_config.yml文件
添加以下内容。(在新版的next主题中已经包含了此字段)

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

填写复制来的App ID和App Key。

添加lean-analytics.swig文件

在themes\next\layout\_scripts路径下，新建一个lean-analytics.swig文件，并向里面添加以下内容

{% if theme.leancloud_visitors.enable %}

  {# 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);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $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 $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              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>

{% endif %}

修改post.swig文件

在themes\next\layout\_macro路径下，打开post.swig文件.
我个人将阅读统计功能加到文章分类后面，所以就找到包含有post-category字样的代码段。
然后将以下内容复制粘贴到其后即可。

{# LeanCould PageView #}
{% if theme.leancloud_visitors.enable %}
   <span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
   &nbsp; | &nbsp;
     <span class="post-meta-divider">阅读次数:</span>
     <span class="post-meta-item-icon">
       <i class="fa fa-eye"></i>
     </span>
     {% if theme.post_meta.item_text %}
       <span class="post-meta-item-text">{{__('post.visitors')}}&#58;</span>
     {% endif %}
       <span class="leancloud-visitors-count"></span>
   </span>
{% endif %}

修改layout.swig文件

在themes\magiclamp\layout路径下，打开 _layout.swig文件，在</body>上方添加如下内容：

1
2
3

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

添加完成之后，文件内容如下图所示：

修改zh-Hans.yml文件

打开在NexT目录的languages路径下的zh-Hans.yml文件，在post:结点下添加visitors: 阅读次数，如下所示：

post:
  posted: 发表于
  visitors: 阅读次数
  updated: 更新于
  in: 分类于
  read_more: 阅读全文
  untitled: 未命名
  toc_empty: 此文章未包含目录

这个时候重新生成部署Hexo博客，应该就可以正常使用文章阅读量统计的功能了。
需要特别说明的是：记录文章访问量的唯一标识符是文章的 发布日期以及文章的标题，因此应该确保这两个数值组合的唯一性，如果你更改了这两个数值，会造成文章阅读数值的清零重计。所以我们最好在发布之前就应该提前设置好发布日期以及文章的标题。

LeanCloud管理

当你配置部分完成之后，初始的文章统计量显示为0，但是这个时候我们LeanCloud对应的应用的Counter表中并没有相应的记录，只是单纯的显示为0而已，当博客文章在配置好阅读量统计服务之后第一次打开时，便会自动向服务器发送数据来创建一条数据，该数据会被记录在对应的应用的Counter表中。

伪造阅读量

虽然该方法可行性很高，但我本人并不认同，这只是达到了欺骗自己欺骗读者的目的，并不能真正提高自己博客的知名度，个人认为还是真正做好自己的技术，写好自己的技术文章即可。

我们可以修改其中的time字段的数值来达到修改某一篇文章的访问量的目的。有两种操作方式:

双击具体的数值，修改之后使用组合键Ctr+Enter即可保存。
选中time字段的单元格，然后点击”编辑单元格”

向其中写入数值，然后点击”保存”即可。
Web安全
因为AppID以及AppKey是暴露在外的，因此如果一些别用用心之人知道了之后用于其它目的是得不偿失的。(比如一些人使用你个人的AppID以及AppKey，那样流过的数据就流入了你的leancloud存储里)为了确保只用于我们自己的博客，建议开启Web安全选项，这样就只能通过我们自己的域名才有权访问后台的数据了，可以进一步提升安全性。
选择应用的设置的安全中心选项卡,在Web 安全域名中填入我们自己的博客域名，来确保数据调用的安全:

当你已经按照教程正常配置之后，如果还是没有出现，那么你现在需要做的不是重新看教程,而是应该自己调试。
“F12”打开开发者选项，选中”网络”选项，然后刷新网页。(此时我使用的是Firefox 65.0.1 (64 位))
)
可以看到403报错，这个状态码说明了资源不可用，服务器理解客户的请求，但拒绝处理它，通常由于服务器上文件或目录的权限设置导致的WEB访问错误。
你可以更改为正确的安全域名或者如果你不知道如何修改，那么就干脆放弃设置Web安全域名。
ok，再次设置好安全域名，我们再次刷新网页，状态码变成了200。

我们随便打开一篇文章，查看一下是否能成功记录阅读次数。

ok，成功。

后记

趁着这几日还未开学，所以赶快趁着时间优化一下博客，给博客增加一些好玩的新功能。之前一直没时间做，所以一直不敢做优化。所幸这次时间充足，就一下子做了很多优化。但是依然存在很多问题，并且这些问题更加困难，这些问题我也都全部记录了下来，只能等下次有充足时间再来解决了。更新日志全部记录在GitHub仓库的README文件中，👉点击查看

扫码进群，我等待你的加入