Gitalk

Gitalk 是一個基於 GitHub Issue 和 Preact 開發的評論插件。

特性

• 使用 GitHub 登錄
• 支持多語言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko]
• 支持個人或組織
• 無干擾模式（設置 distractionFreeMode 為 true 開啟）
• 快捷鍵提交評論 （cmd|ctrl + enter）

Readme 在線示例

安裝

兩種方式

• 直接引入

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



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

• npm 安裝

npm i --save gitalk

import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

使用

添加壹個容器：

用下面的 Javascript 代碼來生成 gitalk 插件：

var gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID',
  clientSecret: 'GitHub Application Client Secret',
  repo: 'GitHub repo',
  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')

需要 GitHub Application，如果沒有 點擊這裡申請，Authorization callback URL 填寫當前使用插件頁面的域名。

在React使用

使用以下代碼引入Gitalk組件

import GitalkComponent from "gitalk/dist/gitalk-component";

按以下方式在React中使用Gitalk組件

<GitalkComponent options={{
  clientID: "...",
  // ...
  // 設置項
}} />

設置

• 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, es-ES, fr, ru, de, pl, ko]。

• 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.azm.workers.dev/https://github.com/login/oauth/access_token.

GitHub oauth 請求到反向代理，為了支持 CORS。 為什麼要這樣?

• flipMoveOptions Object

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

評論列表的動畫。 參考

• enableHotKey Boolean

Default: true.

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

實例方法

• render(String/HTMLElement)

初始化渲染並掛載插件。

TypeScript

已經包括了配置項和Gitalk類的類型定義，不包括React組件的類型定義。

貢獻

1. Fork 代碼倉庫 並從 master 創建你的分支
2. 如果你添加的代碼需要測試，請添加測試！
3. 如果你修改了 API，請更新文檔。
4. 確保單元測試通過 (npm test).
5. 確保代碼風格一致 (npm run lint).
6. 提交你的代碼 (git commit) 提交信息格式參考

類似項目

• gitment
• vssue

許可

MIT