善用 Github Issue 的開源評論插件 -- Gitalk

作者: Calpa Liu
字數:894
出版:2017 年 8 月 4 日
#JavaScript#Frontend
以前,我的博客是用 Disqus 的評論插件,但是無論是載入速度,還是樣式上,都是有所缺乏的。我一直沒有安裝其他的評論插件,因為覺得搬家有點麻煩。但是當我試用一下之後,我就覺得這個插件安裝很方便,功能也很實用,尤其是可以寫 Markdown 評論,讓我非常喜歡這個插件了。

以前,我的博客是用 Disqus 的評論插件,但是無論是載入速度,還是樣式上,都是有所缺乏的。我一直沒有安裝其他的評論插件,因為覺得搬家有點麻煩。但是當我試用一下之後,我就覺得這個插件安裝很方便,功能也很實用,尤其是可以寫 Markdown 評論,就讓我非常喜歡這個插件了。因此,我拜讀了一下 Gitalk Github Repo 的代碼。我會在這裡說一下我對這個插件的理解,並提交繁體中文 README.md 到官方倉庫上。如果你想試用的話,你可以到 官網我的博客 留言。

Gitalk
Gitalk

Gitalk 是一個基於 Github Issue 和 Preact 開發的評論插件。它支持多語言,包括英文,繁體中文和簡體中文,並 自動判斷用戶當前語言navigator.language || navigator.userLanguage。用戶只需要使用自己的個人或組織 Github 賬戶便可以登入系統。

另外,它也有以下的功能:

  • 無干擾模式:distractionFreeMode
  • 快捷鍵提交評論(cmd || ctrl + enter)

安裝方法

使用 cdn 引入

Imgur
Imgur

直至 8 月 4 日,我仍然沒有在 cdnjs 上面找到 Gitalk 的,只好去 cdnjs/cdnjs 上面提交了 新的 cdn 需求。如果你也認為有需要用到 cdnjs 的話,你可以去那裡說一下。

利用 npm 安裝

npm i --save gitalk
cnpm i --save gitalk
import "gitalk/dist/gitalk.css";
import Gitalk from "gitalk";

去 Github 上面 clone Gitalk

git clone git@github.com:gitalk/gitalk.git
cd gitalk/dist/

然後把壓縮過的gitalk.min.js 放進你的項目。

使用方法

Register a new OAuth Application
Register a new OAuth Application

Gitalk 需要 Github Application,如果沒有請點擊 Register a new OAuth application 申請,Authorization callback URL 填寫當前使用插件頁面的域名,例如我的博客就是填寫 https://calpa.me

代碼範例

var gitalk = new Gitalk({
  clientID: "Github Application Client ID",
  clientSecret: "Github Application Client Secret",
  repo: "Github repo",
  owner: "Github repo owner",
  admin: ["Github repo collaborators"]
});

gitalk.render("gitalk-container");

Gitalk 選項

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

    頁面的唯一標識。

  • 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

    Github oauth 請求到反向代理,為了支持 CORS。

  • flipMoveOptions Object

    Default:

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

    評論列表的動畫。 參考

  • enableHotKey Boolean

    Default: true.

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

方法

  • render(String/HTMLElement)

    初始化渲染並掛載插件,需要提供 HTMLElement 的 id

  • setPerPage(page: number)

    // TODO: 我想在構建 gitalk 之後,可以再次手動設置屬性 perPage 屬性,再次自行定義每個頁面的評論載入量。

後記

這個 Gitalk 也是蠻好用的,它界面簡潔清新,沒有廣告,還支持 Markdown 格式。而且感覺更加適合 Markdown 程序員使用。

關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。