用gitalk給你的博客添加評論服務

1、前言

不像hexo、jekyll等，爲了學習，個人博客是用vue和nodejs搭建出來的。支持在線編輯和markdown渲染等功能。

你們若是感興趣能夠看個人博客地址

最近給本身的博客添加了評論服務，用到的評論服務是Gitalk，它是基於github issue搭建出來的評論系統。廢話很少說，接下來講說如何使用。

2、必要的準備

在Github建立一個用來存放評論的倉庫

固然你也能夠直接用你博客所在的倉庫，由於個人博客部署到了coding pages，因此我單首創建了一個倉庫用來存放評論。

註冊一個Github OAuth application

沒有的能夠點這裏申請

註冊成功後，記錄下你的clientID和clientSecret。

3、安裝

有兩種方式安裝(CDN和npm)，你們可自行選擇。

1. CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
  <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

  <!-- or -->

  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

2. npm

npm i --save gitalk

4、使用

考慮到vue的生命週期等，使用方法上和官方文檔給出來的是須要作略微的調整的。

引入gitalk

//在index.html頁面中CDN引入
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js">

//在vue中import
import Gitalk from 'gitalk'

初始化Gitalk實例

export default {
  data(){
     return{
    gitalk: new Gitalk({
        clientID: "你的clientID",
            clientSecret: "你的clientSecret",
            repo: "剛剛建立的項目名",
            owner: "github用戶名",
            admin: ["github用戶名"],
            id: window.location.hash, // 默認爲pathname,若是你也是像我這樣用vue搭建的，我建議使用hash，緣由具體後面會討論到。
            distractionFreeMode: false // Facebook-like distraction free mode
    })    
    }
  }
}

在恰當的位置添加標籤,用來渲染Gitalk組件。

<div id="gitalk-container"></div>

渲染

mounted(){
  this.gitalk.render("gitalk-container");
}

5、注意事項

id的設置

這個id是用來惟一區分頁面的，也就是你不一樣的文章確定有不一樣的評論數據，Gitalk要經過這個id來區分是哪一個頁面，而後在你的github倉庫建立相應的issue來存放當頁評論數據，id默認值是window.location.pathname

可是默認的只適用於採用history模式的路由，但對於vue-router這種默認採用hash模式的就不行了。

舉個例子

//在history模式下，路由URL以下格式
www.rychou.xyz/article/69

window.location.pathname;// 值是 /article/69

//在hash模式下，路由變成這樣了
www.rychou.xyz/#/article/69

window.location.pathname; // 值是 /

此時，在hash模式下id就不具備惟一性了。

建議使用window.location.hash，此時的值是#/aticle/69,具備惟一性。

固然你也能夠設置vue-router爲history模式，可是這會有一個刷新頁面出現404的BUG，解決辦法參考官方文檔

不使用相似的評論服務Gitment的緣由

我也試過用Gitment，也成功了，可是有一個很是使人不爽的地方，就是每一篇文章都須要手動初始化(建立相應issue)，所以我仍是用了Gitalk,它會根據你的配置，自動幫你初始化。

6、最後

有問題的同窗們，歡迎來原文下方提問，同時也至關於幫我測試一下評論服務了。

參考連接：

• Gitalk
• Gitment
• 官方文檔- vue-router History模式