一款超好用的第三方評論插件--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的賬號登錄評論模塊後刷新頁面，就可以正常使用了。

四，我博客的實例展示：

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