为typecho文章添加阅读量统计功能,一般都用插件,最近在使用hexo的NexT主题时发现LeanCloud可以作为第三方工具来统计阅读数,觉得挺不错,可以拿过来用用,就移植了Doublemine的文章为NexT主题添加文章阅读量统计功能

首先得拥有LeanCloud的AppID以及AppKey和创建应用,然后把下面代码中第三行的App_ID以及App_Key换成你申请好的AppID以及AppKey;具体申请appid和appkey和创建请看原文章。

把下面js代码添加到需要显示阅读次数的页面(放在底部吧)

<!-- 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("App_ID", "App_Key");</script>
<script>
function showTime(Counter) {
    var query = new AV.Query(Counter);
    $(".leancloud_visitors").each(function() {
        var url = $(this).attr("id").trim();
        query.equalTo("url", url);
        query.find({
            success: function(results) {
                if (results.length == 0) {
                    var content = $(document.getElementById(url)).text() + ': 0';
                    $(document.getElementById(url)).text(content);
                    return;
                }
                for (var i = 0; i < results.length; i++) {
                    var object = results[i];
                    var content = $(document.getElementById(url)).text() + ': ' + object.get('time');
                    $(document.getElementById(url)).text(content);
                }
            },
            error: function(object, error) {
                console.log("Error: " + error.code + " " + error.message);
            }
        });

    });
}

function addCount(Counter) {
    var Counter = AV.Object.extend("Counter");
    url = $(".leancloud_visitors").attr('id').trim();
    title = $(".leancloud_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 content = $(document.getElementById(url)).text() + ': ' + counter.get('time');
                        $(document.getElementById(url)).text(content);
                    },
                    error: function(counter, error) {
                        console.log('Failed to save Visitor num, with error message: ' + error.message);
                    }
                });
            } else {
                var newcounter = new Counter();
                newcounter.set("title", title);
                newcounter.set("url", url);
                newcounter.set("time", 1);
                newcounter.save(null, {
                    success: function(newcounter) {
                        console.log("newcounter.get('time')="+newcounter.get('time'));
                        var content = $(document.getElementById(url)).text() + ': ' + newcounter.get('time');
                        $(document.getElementById(url)).text(content);
                    },
                    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>

然后在需要显示阅读数的地方添加下面代码:

<span id="<?php echo $this->cid;?>" class="leancloud_visitors" data-flag-title="<?php $this->title() ?>"> &nbsp; | &nbsp;
    <span class="post-meta-item-icon"> <i class="fa fa-eye"></i></span>
    <span class="post-meta-item-text">阅读次数 </span>
    <span class="leancloud-visitors-count"></span>
</span>

统计信息可以在LeanCloud后台管理

自动草稿

  • 其中url字段被当作唯一ID来使用。
  • title字段显示的是博客文章的标题。
  • 其他字段皆为自动生成,具体作用请查阅LeanCloud官方文档,
  • 如果你不知道有什么作用不建议随意修改。

当然你也可以放在任意一个web网页中