WEIC`S BLOG

使用LeanCloud为文章实现阅读次数统计

使用经验

有些博客程序是没有文章阅读次数功能的,比如Ghost,还有Hexo和Jekyll生成的静态页;

但是,我们要折腾,选择第三方平台来实现这个功能,比如给没有自带评论功能的博客程序加上Disqus等第三方评论系统;

LeanCloud方面

首先需要去LeanCloud注册一个账号,然后进入后台,依次操作(应用 -> 创建新应用 -> “应用名称自定义” -> 开发版 -> 创建);

然后点击刚才新建的应用,进入应用管理界面,依次操作(创建Class -> “Class 名称 必须为 Counter” -> 无限制 -> 创建Class);

以上步骤的操作可参考下方我做的Gif图片演示:

网站方面

复制下方的JavaScript代码,将其放到你需要计数的页面或全局,注意代码中的App ID和App Key;(下方代码非本人原创,原作者好像是xiaomiao,我做了一丢丢的改造)

<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js" data-no-instant></script>
<script>AV.initialize("这里填你应用的App ID", "这里填你应用的App Key");</script>
<script>
function leancloudV(){
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 ($('.leancloud_visitors').length > 1) {
    showTime(Counter);
  }
}); 
}
</script>

然后在你需要计数的代码处添加下方代码(博客一般都是会循环文章的,所以下方代码中的链接和标题获取方法都需要你自己搞定)

<span id="文章路径" class="leancloud_visitors"  data-flag-title="文章标题"></span>

使用

或许你需要打开一次你的文章才能在LeanCloud后台生成你的文章数据,由于此功能是根据你文章的路径和标题来记录的,就比如文章路径和标题是数据库的主键,所以上面一步中的文章路径和文章标题是很重要的,这些都是要传给上面那段JavaScript来处理的

加载评论
打赏本文
二维码