Gitalk簡(jiǎn)介

Gitalk 是一個(gè)基于 Github Issue 和 Preact 開發(fā)的評(píng)論組件贸典，支持 MarkDown 語法晰甚。

官方地址

https://gitalk.github.io/

特性

• 使用 github 帳戶進(jìn)行身份驗(yàn)證

• 無服務(wù)器砚哗，所有評(píng)論將存儲(chǔ)為github問題

• 個(gè)人和組織github項(xiàng)目均可用于存儲(chǔ)評(píng)論

• 本地化，支持多種語言[en扇苞，zh-CN录择，zh-TW，es-ES立美，fr匿又，ru，de]

• 類似于Facebook的無干擾模式（可以通過distractionFreeMode選件啟用）

• 熱鍵提交評(píng)論（cmd | ctrl + Enter）

安裝方法有兩種

• links

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

  <!-- or -->

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

• npm install

npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

用法

1. 首先創(chuàng)建一個(gè)公共的 github 存儲(chǔ)庫來存儲(chǔ)評(píng)論悯辙。（現(xiàn)有的也ok琳省，反正只是用到issue不會(huì)影響倉庫代碼。）

2. 創(chuàng)建一個(gè)GitHub 應(yīng)用程序躲撰，創(chuàng)建方法請(qǐng)單擊此處注冊(cè)一個(gè)新應(yīng)用程序针贬。

注意： 必須在字段中指定網(wǎng)站域 url Authorization callback URL（回調(diào)的地址），都寫你的個(gè)人網(wǎng)站地址就可以了拢蛋。

3. 選擇如何應(yīng)用到頁面快压，如下所示：

方法：

將容器添加到您的頁面：

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

然后使用下面的Javascript代碼生成gitalk插件：

const gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',      // The repository of store comments,
  owner: 'GitHub repo owner',
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],
  id: location.pathname,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

其中clientID和clientSecret是上面生成的，填入你的就可以了垃瞧。

選項(xiàng)

• 客戶端ID String

  必填蔫劣。GitHub 應(yīng)用程序客戶端 ID。

• 客戶秘密 String

  必填个从。GitHub 應(yīng)用程序客戶端機(jī)密脉幢。

• 回購 String

  必填。GitHub 存儲(chǔ)庫嗦锐。

• 所有者 String

  必填嫌松。GitHub 存儲(chǔ)庫所有者∞任郏可以是個(gè)人用戶或組織萎羔。

• 行政 Array

  必填。GitHub 存儲(chǔ)庫所有者和協(xié)作者碳默。（對(duì)該存儲(chǔ)庫具有寫入權(quán)限的用戶）

• ID String

  默認(rèn)值：location.href.

  頁面的唯一標(biāo)識(shí)贾陷。長(zhǎng)度必須小于 50。

• 數(shù)字 Number

  默認(rèn)值：-1.

  頁面的issue ID嘱根，如果number沒有定義該屬性昵宇，則使用.issue定位issue id。

• 標(biāo)簽 Array

  默認(rèn)值：['Gitalk'].

  GitHub 問題標(biāo)簽儿子。

• 標(biāo)題 String

  默認(rèn)值：document.title.

  GitHub 問題標(biāo)題瓦哎。

• 身體 String

  默認(rèn)值：location.href + header.meta[description].

  GitHub 問題正文。

• 語言 String

  默認(rèn)值：navigator.language || navigator.userLanguage.

  本地化語言鍵柔逼，支持[ en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko, fa, ja]蒋譬。

• 每頁 Number

  默認(rèn)值：10.

  分頁大小，最大 100愉适。

• 無干擾模式 Boolean

  默認(rèn)值：假犯助。

  類似 Facebook 的無干擾模式。

• pagerDirection String

  默認(rèn)值：“最后”

  評(píng)論排序方向维咸，可選值為last和first剂买。

• 手動(dòng)創(chuàng)建問題 Boolean

  默認(rèn)值：false.

  默認(rèn)情況下惠爽，當(dāng)?shù)卿浻脩魧儆谟脩魰r(shí)，Gitalk 會(huì)自動(dòng)為您的每個(gè)頁面創(chuàng)建一個(gè)相應(yīng)的 github 問題admin瞬哼。您可以通過將此選項(xiàng)設(shè)置為 來手動(dòng)創(chuàng)建它true婚肆。

• 代理人 String

  默認(rèn)值：https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token.

  GitHub oauth 請(qǐng)求 CORS 的反向代理。為什么需要這個(gè)坐慰？

• 翻轉(zhuǎn)移動(dòng)選項(xiàng) Object

  默認(rèn)：

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

  評(píng)論列表動(dòng)畫较性。參考

• 啟用熱鍵 Boolean

  默認(rèn)值：true.

  啟用熱鍵 (cmd|ctrl + enter) 提交評(píng)論。

效果演示

點(diǎn)擊訪問