在个人博客中添加文章点击次数

最新推荐文章于 2022-05-10 14:46:10 发布

爱博客大伯

最新推荐文章于 2022-05-10 14:46:10 发布

阅读量9k

点赞数 4

分类专栏：个人博客

本文链接：https://blog.csdn.net/u013553529/article/details/63357382

版权

个人博客专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在个人博客中添加文章点击次数

先放出修改的代码差异，可以从这个链接看到： https://github.com/galian123/galian123.github.io/commit/f85b466791e98ec5fe3c4b56f3b28b9a94f9d101 。

0. 背景介绍

我的博客是基于 jekyll + Github pages 。
采用 LeanCloud 作为博客文章访问量的服务器存储。感谢LeanCloud的免费服务。
借鉴了 Hexo 主题中对 LeanCloud 的支持。
并参考了如何让 Jekyll 支持文章查看数的统计和为博客文章添加阅读量统计功能，以及这两个网站中网页的源代码。

1. LeanCloud 介绍

引用官方的介绍：

LeanCloud 是行业领先的一站式后端云服务提供商，专注于为移动开发者提供一流的工具、平台和服务。

自 2013 年 9 月发布以来，LeanCloud 已经服务了超过十万用户，其中既有大量个人项目和开源项目，也包括大量创业公司的产品，以及大型商业项目。

我们提供包括数据存储、文件存储与 CDN、消息推送和实时通信在内的后端云服务，同时提供支撑后端代码的云引擎和云函数等开发工具，全面涵盖移动开发的需求；我们同时也提供了易于集成的全平台 SDK，支持 iOS、Android 应用和游戏开发，以及包括微信小程序在内的 web 开发。我们努力帮助开发者摆脱繁重的后端开发负担，最大限度地减少开发成本、缩短开发周期、加快迭代速度，在激烈的市场竞争中胜出。

LeanCloud提供了很强大的功能，本文中用到的只是LeanCloud中的数据存储功能，而且没有涉及复杂的数据处理。

LeanCloud官方有很多教程，我们关注JavaScript相关的。

JavaScript SDK 安装指南：我们不用安装，只是为了直观的了解 LeanCloud 的一些界面、设置，比如，CDN加速设置、LeanCloud的github。
数据存储入门教程 · JavaScript : 这里有个可操作的demo，由于Hexo主题中已经有关于LeanCloud的代码，我没有执行这个demo，直接拿Hexo主题中的LeanCloud代码来测试。
其实为了更好的理解LeanCloud的知识，还是需要动手操作一下demo的。
数据存储开发指南 · JavaScript ：这篇是必读，如果是利用LeanCloud从头开发一些功能，就需要精读这篇帮助。我只获取了一些基本信息，比如，WEB安全的设置、LeanCloud中的对象AV.Object和AV.File。对象的创建、保存、读取，对象的属性获取，计数器相关的。

下面介绍使用LeanCloud的思路。

2. 思路

本文中要解决的是，在我的个人博客中添加文章阅读次数。
LeanCloud的作用是用作数据存储服务器，即，将文章阅读次数记录在LeanCloud的服务器中。每次打开一篇文章时，去LeanCloud服务器取之前文章阅读次数，在之前的数值上加一，并把更新后的数据传到LeanCloud服务器。

先直观看一下LeanCloud中的数据：

这里写图片描述

需要保存哪些数据？
我保存了文章的url（page.url）、文章的标题（page.title）和点击次数（hits）。在jekyll中，还有一个数据是文章的id（page.id），文章的id 和 文章的url 只选其一即可。
如何判断是否同一篇文章？
关于同一篇文章的判断，我只使用了文章的url（page.url，跟page.id类似）。即如果文章的url是一样的，那么就认为是同一篇文章，文章点击次数就记录在一起。
所以，不要轻易修改文章的url。
文章的url的一般形式为/2017/03/18/i-do-nothing，一般文件名（i-do-nothing.md）不会改变，需要注意的是，文章内的日期也不要随便改动。
文章标题变了，有什么影响？
在第一次点击文章时，文章的标题上传到了LeanCloud服务器，并记录下来。
以后再次点击文章，不会在LeanCloud中创建新的条目，只是将之前那一条的hits加1。
所以，当文章标题改变之后，再次点击文章，也不会将新的标题上传到LeanCloud了。
文章的url变了，怎么办？
如果你的文章有了一定的点击次数，之后不小心把文章的url（标识文章的身份ID）变了，这时，将会在LeanCloud中创建一条新的条目。之前的点击数量没有记录到改了url的文章中，这时，可以在LeanCloud中手动修改，把之前的hits加到新条目的hits上。
原来每篇文章的点击次数，可以后台修改！
好吧，你可以随便改，如果你愿意的话。但是，对于有理想、追求卓越的IT工程师来说，我坚守自己的底线。

基本的铺垫已经介绍完了，下面开始配置LeanCloud。

3. 配置LeanCloud

3.1 申请`App ID`和`App Key`

登陆LeanCloud：

可以选择用第三方账号登陆，如下：

这里写图片描述

也可以注册一个新账号（在界面中的右上角）：

这里写图片描述

创建应用

这里写图片描述

查看App ID 和 App Key

这里写图片描述

需要注意：App ID和App Key要用在你的博客中，所以基本上等同于是公开的。所以需要做一些安全设置，以防止App ID和 App Key被滥用

千万不要泄露Master Key，拥有Master Key相当于拥有了root权限。

3.2 安全设置

在开始之前，还是先了解一下安全方面的知识。
LeanCloud中给出了官方的说明：数据和安全。

设置服务开关
把没有用到的服务关掉。

这里写图片描述

设置安全域名
如果在调试阶段，还需要把http://127.0.0.1:4000添加进去。记得之后要删掉。

这里写图片描述

3.3 创建Class

名字自定义，名字限制：只能包含字母、数字、下划线，必须以字母开头。
我创建了名为Counter的Class。

这里写图片描述

采用默认的“限制写入”这种ACL权限设置。（PS：ACL 为Access Control List的缩写，访问控制列表）

这里写图片描述

Class创建好之后，可以点击新创建的Class名，可以看到一个表出现了，虽然里面什么都没有呢。先提前看下有内容的样子：

这里写图片描述

接下来，就要开始改代码了。

4. 修改代码

修改的文件列表如下：

    修改：     _config.yml
    新文件：   _includes/leancloud-analytics.html
    修改：     _layouts/default.html
    修改：     _layouts/post.html
    修改：     _posts/2016-12-18-test2.md  (测试用)
    修改：     _sass/_layout.scss
    修改：     index.html

修改的代码差异，可以从这个链接看到： https://github.com/galian123/galian123.github.io/commit/f85b466791e98ec5fe3c4b56f3b28b9a94f9d101

4.1 _config.yml

在_config.yml文件中，添加如下代码：

leancloud:
  enable: true
  app_id: edcgBgescCWpVAgimGW1nbfL-gzGzoHsz
  app_key: 2c30PCULFMUSgBVNOwNKpqeD

在其他文件中，引用leancloud这3个自定义的变量：site.leancloud.enable，site.leancloud.app_id，site.leancloud.app_key。

其中，enable是一个总开关，表示LeanCloud功能的打开或者关闭。
app_id和app_key 是在LeanCloud 中申请的。

注：不可避免的，App ID和App Key是肯定会泄露的，所以我们要做好安全设置。

4.2 leancloud-analytics.html

这个leancloud-analytics.html文件是从 Hexo主题中的lean-analytics.swig移植过来的。

内容如下：

{% if site.leancloud.enable %}

  <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
  <script>AV.initialize("{{site.leancloud.app_id}}", "{{site.leancloud.app_key}}");</script>
  <script>
    function showHitCount(Counter) {
      /* 这是给一个页面中有多篇文章时所调用的，例如博客主界面或者存档界面。
      */
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      // 获取页面中所有文章的id（page.url）
      $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 hits = item.get('hits');// 获取点击次数
            var element = document.getElementById(url);

            // 显示点击次数
            $(element).find(COUNT_CONTAINER_REF).text(hits);
          }
          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) {
      // 页面（博客文章）中的信息：leancloud_visitors
      // id为page.url， data-flag-title为page.title
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      // 只根据文章的url查询LeanCloud服务器中的数据
      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {//说明LeanCloud中已经记录了这篇文章
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("hits");// 将点击次数加1
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('hits'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            // 执行这里，说明LeanCloud中还没有记录此文章
            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); // 文章url
            newcounter.set("hits", 1); // 初始点击次数：1次
            newcounter.save(null, { // 上传到LeanCloud服务器中
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('hits'));
              },
              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) {
        // in post.html, so add 1 to hit counts
        addCount(Counter);
      } else if ($('.post-link').length > 1){
        // in index.html, there are many 'leancloud_visitors' and 'post-link', so just show hit counts.
        showHitCount(Counter);
      }
    });
  </script>
{% endif %}

4.3 _layouts/default.html

default.html是所有页面（包括index.html和每一篇博文）的模板文件。
在 _layouts/default.html 中添加 leancloud-analytics.html 。
在default.html中添加，是为了让LeanCloud的代码出现在每一篇blog中。

添加下面一行：

{% include leancloud-analytics.html %}

具体的添加位置，可以以个人喜好而定。
需要注意的是，需要把 LeanCloud的代码放到 jQuery库之后。

4.4 _layouts/post.html

post.html是我所发的blog的布局模板。在post.html中有发布时间、作者、标签、分类和文章内容。文章点击数量需要在这里显示，所以需要加上如下代码：

   {% if site.leancloud.enable %}
       <span id="{{ page.url }}" class="leancloud_visitors" data-flag-title="{{ page.title }}">
        <span class="post-meta-divider">|</span>
        <span class="post-meta-item-text"> Hits:  </span>
        <span class="leancloud-visitors-count"></span>
       </span>
   {% endif %}

需要注意的是，当前页面的信息记录在变量page中。page.url表示当前文章的地址，是以斜线开头的相对路径，例如blog/2016/12/18/test2。page.title是文章的标题，是为了在LeanCloud后台中看着方便的。当然，也可以用于判断是否是同一篇文章。

注：我没有用page.title做“是否是同一篇文章”的判断，只用page.url作判断。
其实jekyll中有一个变量page.id，也可以用这个id。

关于哪些变量可用，可参考：http://jekyllcn.com/docs/variables/

4.5 index.html

如果你的博客主界面中有博客文章的标题、发布日期，这时可以在index.html中添加上文章点击次数。

要根据实际情况添加下面的代码在适当位置。

    {% if site.leancloud.enable %}
        <span id="{{ post.url }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
         <span class="post-meta-divider">|</span>
         <span class="post-meta-item-text"> Hits:  </span>
         <span class="leancloud-visitors-count"></span>
        </span>
    {% endif %}

注意，这里的post是在{% for post in paginator.posts %}中。

4.6 在css文件中加上样式

设置“文章点击次数”的显示样式。
放在你的css文件中。
注意：要根据你的样式来设置。例如，要与发布日期、作者、标签的样式一致。

我的样式比较丑陋，如下：

.post-meta-divider {
  font-size: $small-font-size;
  color: $grey-color;
}
.post-meta-item-text {
  font-size: $small-font-size;
  color: $grey-color;
}
.leancloud-visitors-count{
  font-size: $small-font-size;
  color: $grey-color;
}

4.7 最终的效果

这里写图片描述

点进去，可以看到点击次数加1了。

这里写图片描述

5. 可能出现的问题

在本地调试过程中（使用http://127.0.0.1:4000），可能会遇到问题。这时，需要打开开发者工具，看看Console（控制台）中的输出信息。

我遇到的问题是：Uncaught ReferenceError: $ is not defined

解决方法：
在出错的代码前加上：

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

jQuery的下载地址：http://jquery.com/download/
目前最新版是3.2.0： https://code.jquery.com/jquery-3.2.0.min.js

为此问题，参考了不少网上的文章，觉得以下几篇有较大帮助，写下来以示感谢：
http://blog.csdn.net/longxia1987/article/details/6116145
http://www.hierror.com/javascript/201397379.shtml
http://blog.csdn.net/shanluan_/article/details/7729218

6. 参考

爱博客大伯

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
在个人博客中添加文章点击次数

在个人博客中添加文章点击次数0. 背景介绍我的博客是基于 jekyll + Github pages 。采用 LeanCloud 作为博客文章访问量的服务器存储。感谢LeanCloud的免费服务。借鉴了 Hexo 主题中对 LeanCloud 的支持。并参考了如何让 Jekyll 支持文章查看数的统计和为博客文章添加阅读量统计功能，以及这两个网站中网页的源代码。1. LeanC
复制链接

扫一扫