【置頂】【專欄】用Github Pages+Hexo搭建部落格

1. 註冊LeanCloud

前往LeanCloud進行註冊登陸

2. 建立&配置應用

點選建立應用

輸入應用名稱(名稱隨意), 選擇開發版, 點選建立

建立成功後點選應用右上角的設定

點選儲存，建立Class，Class名稱設定為Counter(必須為Counter)，選擇無限制，點選建立

建立後點選設定，點選應用Key，獲取App ID和App Key，複製備用

3. 修改主題配置檔案

將主題配置檔案/themes/next/_config.yml中的leancloud_visitors:的enable設為true，並將App ID和App Key填入

4. 配置域名，設定網路安全

點選安全中心, 填寫自己部落格對應的域名（注意協議、域名和埠號需嚴格一致）

由於App ID和App Key是完全暴露的，所以防止他人使用，我們可以在應用設定裡面設定Web安全域名，只有新增的域名才能使用該應用，防止有人Hack我們的資料庫。點選設定，安全中心，Web域名安全，新增Blog域名，點選儲存就OK了

5.啟動Hexo

hexo clean
hexo g
hexo d

6.後臺管理

當以上部分配置完成之後，當我們的部落格頁面第一次開啟時，便會自動向伺服器傳送資訊，在剛才建立的應用 test 的 Counter 表中建立一條資料。

7.部署雲引擎以保證訪客數量不被隨意篡改

依次點選左側雲引擎 -> 部署 -> 線上編輯

點選建立函式

在彈出視窗選擇Hook型別，在選擇 Hook處選擇beforeUpdate，在選擇 Class處選擇Counter類。貼上下方程式碼後，點儲存。

var query = new AV.Query("Counter");
if (request.object.updatedKeys.indexOf('time') !== -1) {
    return query.get(request.object.id).then(function (obj) {
        if (obj.get("time") + 1 !== request.object.get("time")) {
            throw new AV.Cloud.Error('Invalid update!');
        }
    })
}

然後單擊建立按鈕右側的部署 -> 生產環境 -> 部署

待顯示部署完成：1 個例項部署成功即可

8. 一些坑

很多文章到這裡就結束了，但其實還有一些坑…

解決閱讀次數: Counter not initialized! More info at console err msg.

方法一、安裝外掛hexo-leancloud-counter-security
命令列執行npm install hexo-leancloud-counter-security

方法二、將主題配置檔案_config.yml中的對應項security置為false

解決hexo+next 首頁的閱讀次數一直是0，而文章中的閱讀次數能正常顯示？

網上的很多hexo新增閱讀統計量都是老版本的next主題做法，新版本的已經集合了leancloud，只要開啟主題下面lean_cloud功能並且在

/next/layout/_macro/post.swig裡面加以下程式碼就足夠了

{# LeanCould PageView #}
          {% if theme.leancloud_visitors.enable %}
             <span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               {% if theme.post_meta.item_text %}
                 <span class="post-meta-item-text">{{__('post.visitors')}} </span>
               {% endif %}
                 <span class="leancloud-visitors-count"></span>
             </span>
          {% endif %}