基于GitHub Issue实现的社会化评论系统

特点

• 需要Github账号
• 支持 Markdown 语法、表情
• 支持多国语言
• 方便嵌入网页
• 同Github共存亡

安裝

兩種方式

• 直接引入

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

  <!-- or -->

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

使用

添加壹個容器：

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

用下面的 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, fa, ja]。

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

    {
      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