利用Github Pages建立的Jekyll模板我的博客添加閱讀量統計功能

目錄

• 前言
• 準備工做
• 模板文件修改
• 寫在最後

內容轉載自我本身的博客

@(文章目錄)

前言

Jekyll 是一個簡單的免費的 Blog 生成工具，相似 WordPress 。它只是一個生成靜態網頁的工具，不須要數據庫支持，最重要的是，GitHub Pages 基於 Jekyll 構建，因此可垂手可得地在 GitHub 上免費發佈網站並自定義域名。Jekyll 具備許多的主題能夠選擇，也有不少插件能夠安裝，都只須要在文件_config.yml中寫明便可，不過我本身找了很久也沒發現具備博客文章訪問量統計的相關插件（雖然個人博客基本沒什麼人訪問，但也仍是想認真作好，權當是給本身的備忘錄）。而後就去萬能的搜索引擎尋找答案，參考別人的教程以及 leancloud 的 API 使用方法最終完成了點擊量的功能

準備工做

第一步，須要已經成功使用 GitHub Pages ，而後去leancloud 官網註冊一個用戶並登陸
第二步，建立新應用：應用名稱能夠隨意填寫，計價方案選擇開發版，而後點擊建立

第三步，建立class：名字爲Counter，其餘都保持默認值便可

第四步，爲Counter添加列：默認會有四個列字段，不要改動。本身選擇添加列，而後依次添加三個列，分別是url（String 類型），time（Number 類型），title（String 類型）

最後，添加網址白名單：左側的設置欄目，點擊安全中心，在Web 安全域名處填寫本身博客網站的域名

模板文件修改

首先，打開index.html，在文中合適位置添加如下代碼：
瀏覽量:&nbsp;<span id="{{ post.url }}" class="leancloud_visitors" data-flag-title="{{ post.title }}"> - </span>次.
同時根據需求也可將此代碼加入到post.html的合適位置
而後，再分別在以上兩個文件中加入 JavaScript 代碼來控制實現功能：

<!-- 同時兼容http與https -->
<script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>
<script>
    // 第一個參數是appid，第二個參數是appkey，此處的只是示例
    AV.initialize("gQJjjB93fxTAN0W6cmFdlOrW-gzGzoHsz", "IcwsNtdTDwM9gdkJfLNJKcck");
    // 本身建立的Class的名字
    var name='Counter';
    function createRecord(Counter){
      // 設置 ACL
      var acl = new AV.ACL();
      acl.setPublicReadAccess(true);
      acl.setPublicWriteAccess(true);
      // 得到span的全部元素
      var elements=document.getElementsByClassName('leancloud_visitors');
      // 一次建立多條記錄
      var allcounter=[];
      for (var i = 0; i < elements.length ; i++) {
        // 若某span的內容不包括 '-' ，則沒必要建立記錄
        if(elements[i].textContent.indexOf('-') == -1){
          continue;
        }
        var title = elements[i].getAttribute('data-flag-title');
        var url = elements[i].id;
        var newcounter = new Counter();
        newcounter.setACL(acl);
        newcounter.set("title", title);
        newcounter.set("url", url);
        newcounter.set("time", 0);
        allcounter.push(newcounter);
        // 順便更新顯示span爲默認值0
        elements[i].textContent=0;
      }
      AV.Object.saveAll(allcounter).then(function (todo) {
        // 成功保存記錄以後
        console.log('建立記錄成功！');
      }, function (error) {
        // 異常錯誤 
        console.error('建立記錄失敗: ' + error.message);
      });
    }
    function showCount(Counter){
      // 是否須要建立新紀錄的標誌（添加一篇新文章）
      var flag=false;
      var query = new AV.Query(name);
      query.greaterThanOrEqualTo('time', 0);
      query.find().then(function (results) {
        // 當獲取到的記錄爲0時置默認值
        if(results.length==0){
          $('.leancloud_visitors').text('-');
          flag=true;
          console.log('返回查詢記錄爲空');
          // 若是獲取到空記錄就建立新記錄
          createRecord(Counter);
          return;
        }
        // 將獲取到的數據設置爲text
        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.textContent = time;
        }
        // 當某個span含有默認值時說明須要建立記錄
        if($('.leancloud_visitors').text().indexOf("-") != -1){
          flag=true;
        }
        // 當獲取的記錄數與span個數不吻合時
        if(results.length != $('.leancloud_visitors').length){
          flag=true;
        }
        if(flag){
          createRecord(Counter);
        }
      }, function (error) {
        console.log('query error:'+error.message);
      });
    }
    $(function() {
      var Counter = AV.Object.extend(name);
      showCount(Counter);
    });
</script>

其中，appid和appkey能夠在 leancloud 網站的設置的應用Key處找到並粘貼

最後，等待修改生效便可。若是沒有意外的話，這裏將會看到以下結果：

寫在最後

這個閱讀量統計的功能自己實現並不難，並不須要多麼複雜的邏輯和 JavaScript 代碼，我本來是打算使用本身的服務器建立一系列的接口並使用數據庫來保存這些信息的。後來考慮到個人服務器可能沒那麼穩定，以及 leancloud 的免費我的開發版的接口調用次數限制對我這個超級冷清的博客來講已經足夠了，最重要的大概是我太懶了吧，不想本身再實現一套接口，就這樣吧，但願能對遇到此問題的朋友以幫助