一款超好用的第三方評論插件--Gittalk

使用GITALK的背景：

　　　　1. 最近在作一個基於Java的我的博客系統，已經基本完工了，忽然發現怎麼沒有評論的操做，若是再從頭開始從數據庫開始寫的話，花費的代價有點大，因而乎我就在網上尋找一款適合個人第三方評論插件，第一次我找到了「暢言」，結果很使人失望，由於個人網站沒有備案，因此沒法使用「暢言」。因而Gitalk就映入了個人眼簾。

　　　　2. Gitalk 最初推出來，應該是想配合在 github 上建博客，方便添加評論功能的。隨着其餘評論插件的沒落，Gitalk 就火起來了。Gitalk 是一個基於 Github Issue 和 Preact 開發的評論插件。它除了支持 Hexo 外，還支持 java，php 等語言開發的博客。
詳情請參考：官網

使用方法：

1.首先須要到GitHub上去新建一個倉庫用於存放評論的內容：

　2.在設置中打開isue功能：

默認是打開的

3.須要註冊一個Github Application具體步驟以下：

注意兩個URL就是你網站的域名。應用名稱隨便寫，描述隨便寫。

　 (2)完成以後便到了以下頁面：

其中Client ID 和 Client Secret是咱們須要的東西。
　4.如上步驟完成以後，接下來你就會體驗到Gitralk 的方便之處：

　　　只須要將以下代碼引入你想添加評論的 html 或者 jsp 頁面中就可使用了

<-- 引入 -->
<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>

<-- 添加一個容器-->
<div id="gitalk-container"></div>

<-- 生成 gitalk 插件-->
var gitalk = new Gitalk({
  clientID: '56f73fbc5e79a466ea62', //Client ID

  clientSecret: '26d8eb4f3b0de9ce02382103ffc32ba34c4671f4', //Client Secret

  repo: 'blogtalk',//倉庫名稱
  owner: 'smfx1314',//倉庫擁有者
  admin: ['smfx1314'],
  id: location.href,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

設置

• clientID String

  必須. GitHub Application Client ID.

• clientSecret String

  必須. GitHub Application Client Secret.

• repo String

  必須. GitHub repository.

• owner String

  必須. GitHub repository 全部者，能夠是我的或者組織。

• admin Array

  必須. GitHub repository 的全部者和合做者 (對這個 repository 有寫權限的用戶)。

• id String

  Default: location.href.

  頁面的惟一標識。長度必須小於50。

• number Number

  Default: -1.

  頁面的 issue ID 標識，若未定義number屬性則會使用id進行定位。

• labels Array

  Default: ['Gitalk'].

  GitHub issue 的標籤。

• title String

  Default: document.title.

  GitHub issue 的標題。

• body String

  Default: location.href + header.meta[description].

  GitHub issue 的內容。

• language String

  Default: navigator.language || navigator.userLanguage.

  設置語言，支持 [en, zh-CN, zh-TW]。

• perPage Number

  Default: 10.

  每次加載的數據大小，最多 100。

• distractionFreeMode Boolean

  Default: false。

  相似Facebook評論框的全屏遮罩效果.

• pagerDirection String

  Default: 'last'

  評論排序方式， last爲按評論建立時間倒敘，first爲按建立時間正序。

• createIssueManually Boolean

  Default: false.

  若是當前頁面沒有相應的 isssue 且登陸的用戶屬於 admin，則會自動建立 issue。若是設置爲 true，則顯示一個初始化頁面，建立 issue 須要點擊 init 按鈕。

• proxy String

  Default: https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token.

  GitHub oauth 請求到反向代理，爲了支持 CORS。 爲何要這樣?

• flipMoveOptions Object

  Default:

  {
      staggerDelayBy: 150,
      appearAnimation: 'accordionVertical',
      enterAnimation: 'accordionVertical',
      leaveAnimation: 'accordionVertical',
    }

  評論列表的動畫。 參考

• enableHotKey Boolean

  Default: true.

  啓用快捷鍵(cmd|ctrl + enter) 提交評論.

注意：第一次進入時評論模塊加載不出來，須要註冊Github Application的帳號登陸評論模塊後刷新頁面，就能夠正常使用了。

四，我博客的實例展現：

　　　隨便點擊一篇文章進入，底部就會出現評論模塊：