leanCloud,实现文章阅读量统计

发表于   |   分类于   |   阅读次数   |   字数统计: 4,799(字)   |   阅读时长: 26(分)

摘要

本章介绍如何实现通过leanCloud统计您网站的文章阅读量，并介绍一些基本实现方法。
值得庆喜的是Next主题默认就支持leanCloud的相关设置，您只需要进行几部操作就可以实现
你的网站文章阅读量的统计。如果您需要了解更多关于HEXO资料，请点击以下链接。
HEXO-建站系列
HEXO-优化系列
HEXO-进阶系列

通用操作部分

首先在操作前，我们需要确定您的NEXT支持简单设置通用设置就可以实现leanCloud并实现统计
你的文章阅读数量。因为较新的NEXT会自带相关leanCloud的功能代码模块。你只需要设置通用
操作部分的操作就可以实现相关功能，但如果你非NEXT或者你的NEXT主题较为旧，本章也提供
相关实现代码，在此之前我们先说说通用操作部分的设置。是否支持leanCloud模块您都需要进行
的相关操作。我们这里成为通用操作部分。其他归为额外操作部分.
总体的过程是：你需要注册leancloud账户并完成验证后登录leanCloud的，创建应用并配置相关操作
获取对应的AppID和AppKey.完成阅读文章的数量的统计。

注册LeanCloud

注册leanCloud,操作过程(略)

创建应用

创建应用

设置应用名

创建完成

进入应用界面

到此，你的应用创建成功，继续表的创建

创建阅读统计表

创建表类似于你的数据库，存放关于你网站文章的相关信息，包括阅读数量等
创建表，并将表的名字命名为：Counter
创建表
点击右上角的齿轮图标，并创建class，将class名字命名为:Counter
第一步操作：

第二步操作：

操作完成，在左边您会看到Counter的表

获取AppID和AppKey

点击上方的设置

获取AppID和AppKey

设置主题配置文件

设置主题配置文件_config.yml相关字段，实现阅读数量的统计
添加以下字段

1
2
3
4
leancloud_visitors:
  enable: true
  app_id: #你的app_id
  app_key: #你的的app_key

完成配置并重新编译。到此您已经成功设置了阅读量的统计。

额外操作部分

按照next的代码组成和位置(当然你可以自定你的相关代码位置，本例将以next的位置方式存放对应的代码文件)
要实现leanCloud的相关功能你需要编辑或者新建以下部分代码:

  • _layout.swig -themes\next\layout\_layout.swig:主要是引用leanCloud的代码文件(此文件也是主题全局初始化引用接口)
  • post.swig -themes\next\layout\_macro\post.swig:主要是文章主题的代码文件(包含主题显示阅读数量的代码)
  • lean-analytics.swig -themes\next\layout\_scripts\third-party\lean-analytics.swig:包含leanCloud功能代码文件
    以上为next的文件解析和位置介绍。你可以不需要按照以上位置设置，但相关文件的代码引用需要您自行修改。如果
    文件存在请新建。以下贴出相关代码

实现代码

_layout.swig代码

你需要添加以下部分代码：通常如果next集成了leanCloud,你会发现以下代码
代码的作用是引用leanCloud的功能代码。

1
{% include '_scripts/third-party/lean-analytics.swig' %}

post.swig代码

你需要在合适的位置添加如下代码，同理如果你的NEXT集成了LeanCloud功能，你会发现以下代码
代码主要是在文章显示阅读次数等

1
2
3
4
5
6
7
8
9
10
11
{# 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-item-icon">
       <i class="fa fa-eye"></i>
     </span>
     <span class="post-meta-item-text">{{__('post.visitors')}} </span>
     <span class="leancloud-visitors-count"></span>
    </span>
{% endif %}

lean-analytic.swig代码

如果你的NEXT集成了leanCloud功能，你会在本文提到的位置看到此文件，若果没有请新建并填入
以下代码

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
{% 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);
          }
        })
        .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 %}

修改语言配置文件

主要是添加visitors字段
英文网站：修改themes\next\languages\en.yml

1
2
3
4
5
post:
  sticky: Sticky
  posted: Posted on
  visitors: Views // 增加的字段
  ...

中文网站：修改themes\next\languages\zh-Hans.yml

1
2
3
4
post:
  posted: 发表于
  visitors: 阅读次数
  ...

WEB安全

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

设置完成

以上部分设置完成，就可以正常使用leanCloudS实现文章阅读统计

测试

你可以从你的文章页面标题附近
找到阅读次数。同时你也可以从你的leanCloud的后台看到相关文章的统计内容

结语

如果你还需要了解更多技术文章信息，请继续关注Jory博客

看一看，共同关注，共同分享与讨论！