使用GITALK的背景：

1. 最近在做一個基于Java的個人博客系統(tǒng)攒射，已經(jīng)基本完工了猜惋，突然發(fā)現(xiàn)怎么沒有評論的操作侧漓，如果再從頭開始從數(shù)據(jù)庫開始寫的話袍患，花費的代價有點大坦康，于是乎我就在網(wǎng)上尋找一款適合我的第三方評論插件，第一次我找到了“暢言”诡延，結(jié)果很令人失望滞欠，因為我的網(wǎng)站沒有備案，所以無法使用“暢言”肆良。于是Gitalk就映入了我的眼簾筛璧。

2. Gitalk 最初推出來，應(yīng)該是想配合在 github 上建博客惹恃，方便添加評論功能的夭谤。隨著其他評論插件的沒落，Gitalk 就火起來了巫糙。Gitalk 是一個基于 Github Issue 和 Preact 開發(fā)的評論插件朗儒。它除了支持 Hexo 外，還支持 java参淹，php 等語言開發(fā)的博客醉锄。
詳情請參考：官網(wǎng)
)
)

使用方法：

1.首先需要到GitHub上去新建一個倉庫用于存放評論的內(nèi)容：

創(chuàng)建倉庫

設(shè)置

默認是打開的

Issues

3.需要注冊一個Github Application具體步驟如下：

博客評論

注意兩個URL就是你網(wǎng)站的域名。應(yīng)用名稱隨便寫浙值，描述隨便寫恳不。

(2)完成之后便到了如下頁面：

image.png

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

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

<-- 引入 -->
<link rel="stylesheet" >
  <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')

設(shè)置

• 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 有寫權(quán)限的用戶)筐付。

• 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 的內(nèi)容蛹找。

• language String

  Default: navigator.language || navigator.userLanguage.

  設(shè)置語言姨伤，支持 [en, zh-CN, zh-TW]。

• perPage Number

  Default: 10.

  每次加載的數(shù)據(jù)大小庸疾，最多 100乍楚。

• distractionFreeMode Boolean

  Default: false。

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

• pagerDirection String

  Default: 'last'

  評論排序方式届慈， last為按評論創(chuàng)建時間倒敘徒溪，first為按創(chuàng)建時間正序。

• createIssueManually Boolean

  Default: false.

  如果當前頁面沒有相應(yīng)的 isssue 且登錄的用戶屬于 admin金顿，則會自動創(chuàng)建 issue臊泌。如果設(shè)置為 true，則顯示一個初始化頁面揍拆，創(chuàng)建 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的賬號登錄評論模塊后刷新頁面筒狠，就可以正常使用了猪狈。

四，我博客的實例展示：

隨便點擊一篇文章進入辩恼，底部就會出現(xiàn)評論模塊：

image.png