摘要：什么是第三方評論系統(tǒng)博客或系統(tǒng)，一般都是有內(nèi)容和評論兩部分組成。而且垃圾評論和過濾非法關(guān)鍵字難度較大，所以在國內(nèi)外都有第三評論系統(tǒng)。三評論系統(tǒng)實現(xiàn)預(yù)備工作創(chuàng)建。

本文只是介紹如何基于 github issues 實現(xiàn)第三方評論系統(tǒng)，對于 Hexo 介紹，本文并不打算詳述，如果有童鞋之前還沒有了解 Hexo 的，可以先看一下之前文章《靜態(tài)博客框架 Hexo 入門 》，或者直接訪問 Hexo 官網(wǎng) https://hexo.io/

個人博客是基于靜態(tài)博客系統(tǒng)（Hexo）搭建的，本身是沒有具備任何后臺功能的，例如搜索、評論系統(tǒng)等。但是，如果你想在靜態(tài)博客上加上評論功能，也不是無法實現(xiàn)的，這時候就要借助第三方評論系統(tǒng)了。

什么是第三方評論系統(tǒng)？博客或 cms 系統(tǒng)，一般都是有內(nèi)容和評論兩部分組成。評論可以增加博主與用戶之間的交流互動，也是博主一對多的傳達(dá)自己想法和觀點的交流平臺。所以除了社區(qū)平臺外，評論也成為一般博客和cms系統(tǒng)必備功能。大型網(wǎng)站本身自己開發(fā)了評論系統(tǒng)和分享系統(tǒng)，而一般中小型網(wǎng)站開發(fā)的自己的評論系統(tǒng)，成本高。而且垃圾評論和過濾非法關(guān)鍵字難度較大，所以在國內(nèi)外都有第三評論系統(tǒng)。以下是曾經(jīng)流行或者正在流行的一些第三方評論系統(tǒng)。

多說。多說是一款追求極致體驗的社會化評論框，可以用微博、QQ、人人、豆瓣等帳號登錄并評論。多說已經(jīng)成為國內(nèi)份額最大的所謂“社交評論框”服務(wù)，但是這個行業(yè)第一并沒有給它帶來更多的收益和發(fā)展空間。不過可惜，現(xiàn)在已經(jīng)停止服務(wù)了。

搜狐暢言。搜狐暢言是由搜狐推出的一個簡單而強(qiáng)大的社會化評論及聚合平臺。用戶可以直接用自己的社會化網(wǎng)絡(luò)賬戶在第三方網(wǎng)站發(fā)表評論，并且一鍵評論同步至社交網(wǎng)絡(luò)將網(wǎng)站內(nèi)容和自己的評論分享給好友。增加第三方網(wǎng)站用戶活躍度，調(diào)動好友參與評論，幫助網(wǎng)站實現(xiàn)社會化網(wǎng)絡(luò)優(yōu)化，有效提升網(wǎng)站社會化流量?，F(xiàn)在還健在。

友言。友言是國內(nèi)專業(yè)的第三方實時社會化評論系統(tǒng)，“完全社交化”可將評論一鍵同步到各大微博與社區(qū)（目前支持10個社交媒體），同時將評論的回復(fù)與跟帖同步至使用的網(wǎng)站上，讓網(wǎng)站變得更具有活力和社交性，從而為網(wǎng)站帶來更多的回訪和流量，是一個簡單而強(qiáng)大的社會化評論及聚合平臺。現(xiàn)在還健在。

網(wǎng)易云跟帖。網(wǎng)易云跟貼是網(wǎng)易公司推出的強(qiáng)大而又簡單的評論聚合與分享平臺?？拥?，在多說發(fā)布停止服務(wù)聲明之后不久，網(wǎng)易云跟帖也分出了停止服務(wù)聲明。

Disqus。說到第三放評論系統(tǒng)，當(dāng)然不得不提國外第三方評論系統(tǒng)界的老大 Disqus，只可惜由于天朝網(wǎng)絡(luò)原因，Disqus 加載很慢，甚至有時候加載不出來，建議用戶自備梯子。

那么回歸主題，市面上那么多第三方評論系統(tǒng)，就算有那么一兩個掛掉了，還是有很多選擇呢，為什么還要自己去做一個呢，這不是造輪子嗎？其實，一開始我一直用多說的，用的不亦樂乎，突然有一天說掛就掛了，沒辦法，那我就選擇其他的唄，然后就改成網(wǎng)易云，坑爹的，剛改造好沒多久，網(wǎng)易云也掛了。

后面我就在網(wǎng)上找啊找啊，發(fā)現(xiàn)居然有人用 GitHub Issue 做了一個評論系統(tǒng)，這無疑是一個很好的想法，很有創(chuàng)意啊。當(dāng)然，我也拿來用了，但是始終覺得有點丑，跟我自己的博客主題不搭，才用了兩天，撤了，打算自己做一個。說干就干，程序員總喜歡造輪子。

經(jīng)常逛 GitHub 的童鞋，都應(yīng)該知道這個功能，有人理解 GitHub 的 issue 功能，就如同 TODO list。你可以把所有想要在下一步完成的工作，如 feature 添加、bug 修復(fù)等，都寫成一個個的 issue ，放在上面。既可以作為提醒，也可以統(tǒng)一管理。另外，每一次 commit 都可以選擇性的與某個 issue 關(guān)聯(lián)。比如在 message 中添加 #n，就可以與第 n 個 issue 進(jìn)行關(guān)聯(lián)。具體可以看一下知乎里面別人對 《github issue是做什么的？ 》的解答。而本博客的評論數(shù)據(jù)存儲 issues 倉庫地址為 https://github.com/jangdelong/blog_comments/issues，倉庫里面并沒有放置托管代碼。總之，像我現(xiàn)在要用 github Issues 來制作評論系統(tǒng)的，其實就是把數(shù)據(jù)存儲到 github issues，簡單的說可以把 github issues 理解為一個免費的數(shù)據(jù)庫。

預(yù)備工作

創(chuàng)建 OAuth applications。評論需要涉及 GitHub 授權(quán)登錄，所以在這里你先要有一個 GitHub application。GitHub 授權(quán)登錄遵循 OAuth 2.0 標(biāo)準(zhǔn)。OAuth applications 創(chuàng)建如下圖所示，填寫上面相應(yīng)的內(nèi)容。

Application name：你的站點名稱；
Homepage URL：你的站點主頁鏈接；
Application description：站點描述；
Authorization callback URL：GitHub 授權(quán)成功后返回地址

創(chuàng)建成功之后會生成一個 Client ID 和一個 Client Secret。

GitHub REST API v3

GitHub 提供了很多方便第三方開發(fā)的 API，當(dāng)然，github issues 的增刪改查 API 也在其中，有了這些 API，你才能各種施展奇技淫巧，比如我們現(xiàn)在要寫的評論系統(tǒng)。另外，有人懷疑我們應(yīng)不應(yīng)該“濫用”這些 API，但是，個人覺得，既然，GitHub 提供了這些 API，就是說明要開放給大家這些權(quán)限，應(yīng)該就不怕你“濫用”。那么，要滿足我們現(xiàn)在的需求需要哪些 API 呢，下面我列舉一下，以我的賬號為例，jangdelong 為 Github 名，blog_comments 為倉庫名。

GET: https://api.github.com/repos/jangdelong/blog_comments/issues 獲取所有issues信息

GET: https://api.github.com/repos/jangdelong/blog_comments/issues/11 獲取某個issue下的信息 （11 為 issue 編號 ）

GET: https://api.github.com/repos/jangdelong/blog_comments/issues/11/comments 獲取某個issue下的評論

GET: https://api.github.com/repos/jangdelong/blog_comments/issues/comments/111/reactions 獲取評論 ID 為 111 下的所有 reactions（reactions 包含頂[+1]、踩[-1]、喜歡[heart]等字段）

POST: https://api.github.com/repos/jangdelong/blog_comments/issues 創(chuàng)建一個 issue

POST: https://api.github.com/repos/jangdelong/blog_comments/issues/11/comments 在編號為 11 的 issue 下創(chuàng)建一條評論

POST: https://api.github.com/repos/jangdelong/blog_comments/issues/comments/111/reactions 在 ID 為 111 的評論下創(chuàng)建一條 reactions（如 heart）

POST：https://developer.github.com/v3/markdown/ markdown 語法解析接口

整體設(shè)計

流程圖：

                                             |--> 顯示已登錄    
                              |--> 已登錄 --> |--> 加載評論列表 --> 分頁加載 
                              |              |--> 其他 
                              |              |--> 評論操作 --> 成功/失敗            |
 開始 --> GitHub 授權(quán)登錄 ? --> |                                                   |--> 結(jié)束
                              |              |--> 顯示未登錄                       |
                              |--> 未登錄 --> |--> 加載評論列表 --> 分頁加載          
                                             |--> 其他
                                             |--> 評論操作 --> 提示未登錄狀態(tài)

效果圖：

因此，我們可以將評論系統(tǒng)分為列表（list）、評論框（box）、頂部登錄狀態(tài)欄（signbar）等部分。View 部分的代碼組織為：

// 為了減少全局變量，整個網(wǎng)站就暴露一個全局變量 JELON
var JELON = JELON || {};
;(function (JL) {
    ...
    JL.Renders = {
        // 列表模塊
        list: {
            tpl: ...,
            ...
        },
        // 評論框模塊
        box: {
            tpl: ...,
            ...
        },
        // 頂部登錄狀態(tài)欄
        signBar: {
            tpl: ...,
            ...
        },
        ... // 其他模塊視圖
    };
    ...
})(JELON);

視圖部分的代碼組織好之后，根據(jù) GitHub 提供的各種 API，我們將其封裝到 Requests 里面去，組織如下：

// 為了減少全局變量，整個網(wǎng)站就暴露一個全局變量 JELON
var JELON = JELON || {};
;(function (JL) {
    ...
    JL.Requests = {
        // 根據(jù) label 獲取 issue 編號
        getIssueNumberByLabel: function () { ... },
        // 創(chuàng)建 issue
        createIssue: function () { ... },
        // 根據(jù) issue 編號獲取評論列表
        getCommentListByIssueNumber: function () { ... },
        // 根據(jù)評論 ID 獲取 reactions （即點贊數(shù)據(jù)）
        getReactionsByCommentId: function () { ... },
        // markdown 解析
        markdown: function () { ... },
        // 通過 code 獲取 access_token
        getAccessToken: function () { ... },
        // 利用 access_token 去獲取 GitHub 用戶信息
        getUserInfo: function () { ... },
        // 創(chuàng)建評論
        createComment: function () { ... },
        // 創(chuàng)建 reactions （點贊）
        createReaction: function () { ... }
    };
    ...
})(JELON);

接下來是封裝事件操作，我們將其封裝到 Actions 里面去，代碼組織如下：

// 為了減少全局變量，整個網(wǎng)站就暴露一個全局變量 JELON
var JELON = JELON || {};
;(function (JL) {
    ...
    JL.Actions = {
        // 初始加載，如列表、登錄狀態(tài)等
        init: function () { ... },
        // 登出操作
        signOut: function () { ... },
        // 列表翻頁跳轉(zhuǎn)
        pageJump: function () { ... },
        // 編輯預(yù)覽
        editPreviewSwitch: function () { ... },
        // 提交評論操作
        postComment: function () { ... },
        // 點贊操作
        like: function () { ... }
    };
    ...
})(JELON);

程序入口：

// 為了減少全局變量，整個網(wǎng)站就暴露一個全局變量 JELON
var JELON = JELON || {};
;(function (JL) {
    ...
    JL.Comment = function (options) {
        JL.options = options || {};
        $("comments").innerHTML = [
            this.Renders.signBar.tpl,
            this.Renders.box.tpl,
            this.Renders.tips,
            this.Renders.list.tpl
        ].join("");
        JL.Actions.init();
    };
    ...
})(JELON);

登錄流程

GitHub 授權(quán)登錄是不可或缺的功能，用只有登錄之后才能進(jìn)行評論。前面有提到，GitHub 授權(quán)登錄是遵循一個 OAuth 2.0 標(biāo)準(zhǔn)。以下是 OAuth 2.0 的一個運作流程，可以讓我們更好的理解它。

那么，GitHub 授權(quán)登錄是怎么樣按照這個標(biāo)準(zhǔn)來運作的呢，接下來簡單介紹一下，如果要更加詳細(xì)深入了解的話，你也可以訪問 GitHub 官方文檔。

用戶發(fā)起重定向請求授權(quán)服務(wù)器換取 code

`GET http://github.com/login/oauth/authorize`

拿到 code 之后，利用 client_id、client_secret 和 code 去換取 token_access。（client_id 和 client_secret 前面的預(yù)備工作里有提到）

`POST https://github.com/login/oauth/access_token`

獲取到 token_access 之后，我們就可以用 token_access 去獲取已登錄的用戶的信息了

`GET https://api.github.com/user`

通過以上3個步驟，GitHub 授權(quán)登錄就算是完成了。

引入評論系統(tǒng)相關(guān)的 css、js 。引入相關(guān)樣式和腳本之后，在你的頁面加入以下代碼：

由于這個評論系統(tǒng)是要集成到個人的主題上去的，所以要跟 hexo-theme-xups 搭配使用，hexo-theme-xups 主題鏈接為 https://github.com/jangdelong/hexo-theme-xups，目前最新的主題（帶有GitHub 登錄評論功能），后面會更新上去，往后當(dāng)然也會陸續(xù)進(jìn)行更新和優(yōu)化，歡迎多多 star。

遇到的問題主要有三個，一個是創(chuàng)建 label 權(quán)限問題，一個是跨域問題，另外一個 GitHub 授權(quán)登錄兼容性問題。

創(chuàng)建 label 權(quán)限問題（目前未解決）。label 是一個連接文章和 issue 關(guān)系的紐帶，因為我們要用 label 去查詢 issue number，后面的流程才能走下去。如今遇到的問題是，對于新文章來說，只能是我自己本人賬號（GitHub Application）創(chuàng)建者才能創(chuàng)建帶有 label 的 issue。參考了 GitHub 的接口（POST /repos/:owner/:repo/issues）文檔，上面說

> Labels to associate with this issue. NOTE: Only users with push access can set labels for new issues. Labels are silently dropped otherwise.

跨域問題（暫時解決了）。主要是通過 code 去換取 token_access 的 POST https://github.com/login/oauth/access_token 這個接口跨域，暫時解決方案是
使用 https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token 進(jìn)行轉(zhuǎn)發(fā)。參見：https://github.com/Rob--W/cor... 。

GitHub 授權(quán)登錄兼容性問題（暫時不解決）。經(jīng)過簡單的測試，發(fā)現(xiàn) PC 端兼容性問題主要是一些老版本的瀏覽器，其中包括一些老版本的谷歌瀏覽器（版本號55.x.xxxx.xx）；而移動端的主要是 UC 瀏覽器無法實現(xiàn) GitHub 授權(quán)登錄。