如何让Jekyll支持文章查看数的统计

2016/11/15

本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接

本篇讲述如何让Jekyll像Hexo的Next主题一样支持文章查看数的统计,希望能为玩Jekyll的同学减少折腾的时间。要支持文章查看数的统计,需要第3方存储服务的支持,可以使用LeanCloud的云存储服务,它支持对象形式的存储,并且能提供包装好的Js脚本来访问存储对象,还是比较方便的。并且目前使用这个服务是免费的,只要你每天的访问量不超过限制就可以。大部分博客一天的访问量其实很有限,达不到这个限制的。

本篇的示例代码支持文章已经有一定浏览量,然后迁移到Jekyll的情况,只要文章的元数据里有views就能进行累加。

支持文章查看数统计的步骤

  1. 注册LeanCloud帐号, 拿到应用的AppId和AppSecret

  2. 在_config.html里配置AppId和AppSecret

    1
    2
    3
    
    lean_cloud :
      app_id   :  app_id
      app_key  :  app_secret
    
  3. 在需要显示文章查看数的页面和文章界面添加如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    
    <span id="http://www.cloudchou.com" class="leancloud_visitors meta_data_item" data-flag-title="">
         <span class="post-meta-item-icon">
           <span class="octicon octicon-eye"></span> 
         </span>
         <span class="old-visitors-count" style="display: none;"></span>
         <span class="leancloud-visitors-count"></span>
         <span class="post-meta-item-text">次浏览</span>
    </span>
    
  4. 添加Js脚本

    在_includes/footer.html里编写如下js脚本:

    或者别的include代码片段,只要是摘要列表页和博客页能包含的代码片段都可以

    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
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    
    <!--访问LeanCloudjs包装脚本-->
    <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
    <!--初始化LeanCloudAV对象-->
    <script>
    AV.initialize("hQbdf5f1KrAGwtP4cXqprx7y-gzGzoHsz", "7F5Wwjbvx11t0bBmyIgmtpy5");
    </script>
    <!--实现计数的js包装脚本-->
    <script type="text/javascript">
    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';
                var OLD_COUNT_CONTAINER_REF = '.old-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() == '') {
                        var oldCountSpan = $(element).find(OLD_COUNT_CONTAINER_REF).text();
                        if(oldCountSpan!=''){
                            countSpan.text(0+parseInt(oldCountSpan));
                        }else{
                            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);
                    var OLD_COUNT_CONTAINER_REF = '.old-visitors-count';
                    var $element = $(document.getElementById(url));
                    var oldCountSpan = $element.find(OLD_COUNT_CONTAINER_REF).text();
                    if(oldCountSpan!=''){
                        newcounter.set("time", parseInt(oldCountSpan)+1);
                    }else{
     	                    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");
        //如果只有1个.leancloud_visitors,则说明是博客页,需要显示查看数并将查看数+1
        //超过1个,则说明是文章列表,只需要显示查看数
        if ($('.leancloud_visitors').length == 1) {
            addCount(Counter);
        } else {
            showTime(Counter);
        }
    });
    </script>
    
    
  5. 实现的效果如下所示:

    浏览数

总结

添加浏览数的统计并不难,有了云服务的支持,只需要在显示浏览数的地方通过Js脚本从云服务获取浏览数据即可,在展示示文章的地方通过Js脚本对浏览数更新即可。

现在有了各种云服务,对个人开发者来说越来越方便了,云服务提供的各种工具非常好用,所以我们只需要编写简单的代码即可实现查看数的统计。

¥打赏5毛

取消

感谢您的支持,我会继续努力的!

扫码支持
赏个5毛,支持我把

打开支付宝扫一扫,即可进行扫码打赏哦

本篇目录