善用 Github Issue 的開源評論插件 -- Gitalk
出版:2017-08-04
以前,我的博客是用 Disqus 的評論插件,但是無論是載入速度,還是樣式上,都是有所缺乏的。我一直沒有安裝其他的評論插件,因為覺得搬家有點麻煩。但是當我試用一下之後,我就覺得這個插件安裝很方便,功能也很實用,尤其是可以寫 Markdown 評論,就讓我非常喜歡這個插件了。因此,我拜讀了一下 Gitalk Github Repo 的代碼。我會在這裡說一下我對這個插件的理解,並提交繁體中文 README.md 到官方倉庫上。如果你想試用的話,你可以到官網或我的博客留言。
Gitalk 是一個基於 Github Issue 和 Preact 開發的評論插件。它支持多語言,包括英文,繁體中文和簡體中文,並自動判斷用戶當前語言:navigator.language || navigator.userLanguage
。用戶只需要使用自己的個人或組織 Github 賬戶便可以登入系統。
另外,它也有以下的功能:
distractionFreeMode
直至 8 月 4 日,我仍然沒有在 cdnjs 上面找到 Gitalk 的,只好去 cdnjs/cdnjs 上面提交了新的 cdn 需求。如果你也認為有需要用到 cdnjs 的話,你可以去那裡說一下。
npm i --save gitalk
cnpm i --save gitalk
import "gitalk/dist/gitalk.css";
import Gitalk from "gitalk";
git clone git@github.com:gitalk/gitalk.git
cd gitalk/dist/
然後把壓縮過的gitalk.min.js
放進你的項目。
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");
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
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 是一個四天工作的系統架構師,日常幫助客戶構建一站式網站應用,手機應用,雲端架構。
2023 年 9 月,Calpa 收到來自國內外不同 Web3 團隊的邀請,參加韓國的 KBW 2023 和新加坡的 TOKEN 2049 活動。十二月份,Calpa 將參加台北區塊鏈週的 Hackathon 比賽。
Calpa 擅長運用各種前沿技術,包括 TypeScript、React.js 和 Vue.js,開發具有 Responsive Web Design 的網站。另外,他透過運用 aws-cdk 和 TypeScript 技術的融合,實現了基於雲端的「基礎即代碼」(Infrastructure as Code)部署策略,建立了多套高效且具有可伸縮性的全端架構。
同時,Calpa 積極參與各個社群,活躍於香港和台灣的開源社區,分享前沿知識。他曾在 2019 年的香港開源大會中擔任重要講者,為聽眾提供寶貴的工作經驗和深刻見解。此外,Calpa 在 GitHub 上公開分享了個人博客程式碼,已獲得超過 300 顆星星和 60 個分支。
如果您對系統架構有任何問題,或需要進一步交流,請隨時聯絡 Calpa,他非常歡迎討論。