Gitment是一個基於GitHub問題的評論系統，可以在沒有任何服務器端實現的前端使用。
特征
- GitHub登錄
- Markdown / GFM支持
- 語法突出顯示
- 來自GitHub的通知
- 易於定制
- 沒有服務器端實現
入門
1.安裝
< link rel = “ stylesheet ” href = “ https://imsun.github.io/gitment/style/default.css ” >
< script src = “ https://imsun.github.io/gitment/dist/gitment.browser.js ” > < / script >
或通過npm：
$ npm i - 保存gitment
從' gitment '導入' gitment / style / default.css ' 導入 Gitment
2.注冊OAuth應用程序
單擊此處注冊OAuth應用程序，您將獲得客戶端ID和客戶端密鑰。
確保回調網址正確。通常它是您網站的起源，例如https://imsun.net。
3.渲染Gitment
const gitment = new Gitment（{ id ： '您的頁面ID '，//可選 所有者： '您的GitHub ID '， repo ： '存儲評論的回購'， oauth ： { client_id ： '您的客戶ID '， client_secret ： '你的客戶秘密'， }， // ... //有關更多可用選項，請查看以下文檔 }） gitment。render（' comments '） //或 // gitment.render（document.getElementById（'comments'）） //或 // document.body.appendChild（gitment.render（））
4.初始化您的評論
頁面發布后，您應該訪問您的頁面，使用您的GitHub帳戶登錄（確保您是repo的所有者），然后單擊初始化按鈕，在您的倉庫中創建相關問題。在那之后，其他人可以留下他們的評論。
方法
構造器（選項）
選項：
類型： object
- 所有者：您的GitHub ID。需要。
- repo：存儲您的評論的存儲庫。確保你是回購的所有者。需要。
- oauth：對象包含您的客戶端ID和客戶端密鑰。需要。
- client_id：GitHub客戶端ID。需要。
- client_secret：GitHub客戶端密鑰。需要。
- id：用於標識頁面的可選字符串。默認
location.href。 - title：頁面的可選標題，用作問題標題。默認
document.title。 - link：您頁面的可選鏈接，用於問題正文。默認
location.href。 - desc：頁面的可選描述，用於問題的正文。默認
''。 - labels：創建問題時要添加的可選標簽數組。默認
[]。 - theme：可選的Gitment主題對象。默認
gitment.defaultTheme。 - perPage：注釋將被分頁的可選數字。默認
20。 - maxCommentHeight：一個可選數字，用於限制注釋的最大高度，注釋將被折疊。默認
250。
gitment.render（[元素]）
元件
輸入：HTMLElement或string
要呈現注釋的DOM元素。可以是HTML元素或元素的id。省略時，此函數將創建一個新div元素。
此函數返回要呈現注釋的元素。
gitment.renderHeader（[元素]）
同樣的gitment.render([element])。但只渲染標題。
gitment.renderComments（[元素]）
同樣的gitment.render([element])。但只呈現評論列表。
gitment.renderEditor（[元素]）
同樣的gitment.render([element])。但只能渲染編輯器。
gitment.renderFooter（[元素]）
同樣的gitment.render([element])。但只會呈現頁腳。
gitment.init（）
初始化新頁面。Promise初始化時返回a 並解析。
gitment.update（）
更新數據和視圖。返回a Promise並在數據更新時解析。
gitment.post（）
在編輯器中發表評論。Promise發布時返回a 並解析。
gitment.markdown（文本）
文本
類型： string
返回Promise並解析呈現的文本。
gitment.login（）
跳轉到GitHub OAuth頁面進行登錄。
gitment.logout（）
注銷當前用戶。
轉到頁面）
頁
類型： number
跳轉到評論的目標頁面。請注意，page從1。Promise加載注釋時返回a 並解析。
gitment.like（）
喜歡當前頁面。返回a Promise並在喜歡時解析。
gitment.unlike（）
與當前頁面不同。Promise不受歡迎時返回a 並解析。
gitment.likeAComment（commentId）
commentId
類型： string
喜歡評論。返回a Promise並在喜歡時解析。
gitment.unlikeAComment（commentId）
commentId
類型： string
與評論不同。Promise不受歡迎時返回a 並解析。
定制
Gitment很容易定制。您可以使用自己的CSS或編寫主題。（區別在於自定義CSS無法修改DOM結構）
使用自定義CSS
Gitment不使用任何原子CSS，使定制更容易，更靈活。您可以在瀏覽器中檢查DOM結構並編寫自己的樣式。
寫一個主題
Gitment主題是一個包含多個渲染函數的對象。
默認情況下，Gitment有五個渲染功能：render，renderHeader，renderComments，renderEditor，renderFooter。最后四個渲染獨立的組件和render函數將它們組合在一起。所有這些都可以獨立使用。
您可以覆蓋上面的任何渲染函數或編寫自己的渲染函數。
例如，您可以覆蓋render函數以將編輯器放在注釋列表之前，並呈現新組件。
const myTheme = { render（state，instance）{ const container = document。createElement（' div '） 容器。lang = “ en-US ” 容器。className = ' gitment-container gitment-root-container ' //您的自定義組件 容器。的appendChild（實例。 renderSomething（狀態，實例）） 容器。的appendChild（實例。renderHeader（狀態，實例）） 容器。的appendChild（實例。的renderEditor（狀態，實例）） 容器。的appendChild（實例。renderComments（狀態，實例）） 容器。使用appendChild（實例。renderFooter（州，實例）） 返回容器 }， renderSomething（state，instance）{ const container = document。createElement（' div '） 容器。郎 = “的en-US ” 如果（狀態。用戶。登錄）{ 容器。innerText = ` Hello，$ { state。用戶。登錄} ` } 返回容器 } } const gitment = new Gitment（{ // ... 主題： myTheme， }） gitment。渲染（文件。體） //或 // gitment.renderSomthing（document.body的）
每個渲染函數都應該接收一個狀態對象和一個gitment實例，並返回一個HTML元素。它將被包裝附加到具有相同名稱的Gitment實例。
Gitment使用MobX來檢測渲染函數中使用的狀態。一旦使用狀態改變，Gitment將調用render函數來獲取一個新元素並進行渲染。未使用狀態的更改不會影響渲染元素。
可用狀態：
- 用戶：
object。用戶信息從GitHub Users API返回，另外還有兩個鍵。- isLoggingIn :
bool. 指示用戶是否正在登錄。 - 來自小姐：
bool。Gitment將緩存用戶的信息。其值指示當前用戶信息是否來自緩存。
- isLoggingIn :
- 錯誤：
Error Object。如果沒有錯誤，則為null。 - meta :
object. 從GitHub Issues API返回問題的信息。 - 評論：
array。從GitHub Issue Comments API返回的注釋數組。將undefined注釋未加載時。 - 反應：
array。從GitHub Issues'Reactions API返回的添加到當前頁面的一系列反應。 - commentReactions :
object. 添加到注釋的反應對象，注釋ID為關鍵，從GitHub Issue Comments'Reactions API返回。 - currentPage :
number. 用戶在哪個評論頁面。從...開始1。
關於安全
讓我的客戶秘密公開是否安全？
OAuth需要客戶端密碼，否則用戶無法使用其GitHub帳戶登錄或評論。雖然GitHub不建議在前端硬編碼客戶端密碼，但你仍然可以這樣做，因為GitHub會驗證你的回調URL。從理論上講，除了你的網站，沒有其他人可以使用你的秘密。
如果您找到了破解它的方法，請打開一個問題。
為什么Gitment向gh-oauth.imsun.net發送請求？
https://gh-oauth.imsun.net是一個簡單的開源服務，用於在用戶登錄期間代理一個請求。因為GitHub沒有附加CORS頭。
此服務不會記錄或存儲任何內容。它只將CORS標頭附加到該請求並提供代理。這樣用戶就可以在沒有任何服務器端實現的情況下登錄前端。