基於GitHub Issues的評論系統--gitment

文章原創於公衆號：程序猿周先森。本平臺不定時更新，喜歡個人文章，歡迎關注個人微信公衆號。

最近在作我的博客網站，須要評論系統，比較流行的幾個第三方評論系統：多說，友言，網易雲跟帖，gitment，以前使用過多說，感受挺好用的，可是如今多說服務器已經關閉了，最後我選擇了gitment這個評論系統，由於我的博客網站面對的人羣比較偏向IT領域，gitment是使用GitHub帳號進行受權登陸，因此能夠省卻用戶註冊登陸等操做。Gitment 是基於 GitHub Issues 的評論系統。支持在前端直接引入，不須要任何後端代碼。能夠在頁面進行登陸、查看、評論、點贊等操做，同時有完整的 Markdown 和代碼高亮支持。適合各類靜態博客或項目頁面。

1.註冊OAuth Application
進入GitHub官網https://github.com/ ，點擊右上角頭像，選擇setting

進入setting後選擇developer setting

選擇new OAuth app

前面三個參數能夠隨意填寫，第四個參數很重要，是回調URL，這個必定不能填寫錯，通常填寫你博客主頁地址，我目前博客還未上線是內網穿透到外網生成博客測試地址，因此我回調URL填寫了http://zhanyue.natapp1.cc ，也就是我博客主頁地址，填寫完成點擊Register application

註冊應用成功後，能夠獲得你應用的Client ID, Client Secret，而後到這裏註冊成功。

2.在HTML中設置一個div，用來放置評論系統

評論系統所需包有如下兩個：
https://imsun.github.io/gitme...

https://imsun.github.io/gitme...

直接在界面中引入如上兩個文件就能夠了。

3.設置參數，渲染評論系統

評論系統分爲兩部分，第一部分渲染頁面估計都能看懂，惟一須要注意的就是gitment目前只支持編碼en-US，第二部分就是評論系統的配置信息：

1. id:  咱們文章的id，用來區分是哪一篇文章。

1. owner: GitHub帳戶的username

1. repo： GitHub的倉庫名

1. Client_id: 步驟1獲得的Client_id

1. Client_secret: 步驟1獲得的Client_secret

到這裏咱們就能夠成功搭建博客系統了，接下來讓咱們測試一下。不過gitment每篇博客都須要你手動初始化評論功能(若是你的歷史博客不少那就一篇一篇去點吧，不過貌似有人寫了批量處理腳本,沒試過哈).

評論系統成功進行顯示了，可是好像出了點問題：Error: Comments Not Initialized，其實這個不是出問題，這個是由於這篇文章的評論系統還未進行初始化，上面說過gitment每篇文章都須要手動進行初始化。

點擊登陸，第一次會出現受權GitHub帳號登陸的驗證，受權登陸完成會發現剛纔的Error消失了

點擊最下方的初始化評論，對這篇文章進行初始化，而後就能夠正常使用評論系統了。

從圖中咱們能夠看到評論系統能夠正常使用了到這裏基於GitHub Issues的評論插件--gitment開發就完成了。最後再說說gitment開發容易碰到的幾個坑吧。

1.Error: Not Found問題

owner或者repo配置錯誤了，注意GitHub和倉庫名字的大小寫。

2.Error: Comments Not Initialized
這個問題要麼你回調URL填寫的有問題，要麼就是剛纔說的你還未進行登陸。

3.登陸報錯[object ProgressEvent]

我用postman測試發現這個錯誤徹底是由於gitment做者的騷操做，服務器過時了，可是做者源碼進行開放了，能夠本身clone源碼而後放置到服務器進行使用，個人話使用了GitHub一個網友本身搭建的服務器：

由於我是將包進行下載到本地而後用webpack進行打包使用，因此直接在gitment.js包中找到如圖代碼，將地址更換爲

而後就能夠成功使用GitHub帳號進行登陸評論了。

關於gitment評論系統的使用就講到這裏，歡迎加入個人技術羣一塊兒學習。公衆號主頁有羣二維碼。不按期在羣裏更新學習資源。

歡迎關注我我的公衆號：程序猿周先森