Vssue - 又一個用 Issue 給靜態頁面做評論的外掛

meteorlxy發表於2019-02-22

Vssue 簡介

如果你知道 Gitment 和 Gitalk，那麼 Vssue 其實和它們實現的功能沒什麼區別 —— 在 Github 的 Issue 系統中儲存評論，在你的頁面上發表和展示評論。

當然，重複造輪子還是有原因的，Vssue 的特點在於：

  • 支援多種平臺，很容易擴充套件到其他平臺上。不只是 Github，目前還支援了 Gitlab 和 Bitbucket
  • 除了發表評論，還可以編輯和刪除評論（不知道為什麼另外兩個專案都沒有支援）
  • 基於 Vue 開發，很容易整合到 Vue 專案中，並且提供了 Vuepress 的外掛（最初的動力就是給自己的 Vuepress 部落格開啟評論）

創意確實不新，有些地方也是借鑑另外兩個專案的，但是專案的整體實現思路都不一樣。

Vssue 是如何工作的

程式碼託管平臺遵從 OAuth 2 spec 提供了 OAuth API。Vssue 利用平臺提供的 OAuth API，使得使用者可以登入並發表評論。

下面是 Vssue 的簡要工作過程：

           Vssue                                               平臺
  ┌──────────────────────┐                            ┌────────────────────┐
  │       點選登入        ├───────── 重定向 ──────────>│       授權頁面      │
  └──────────────────────┘                            └──────────┬─────────┘
  ┌──────────────────────┐                                       │
  │                      │<──── 帶有 code 重定向 ─────────────────┘
  │       處理授權        │                            ┌────────────────────┐
  │                      │<───── 請求獲取 token ──────>│                    │
  └──────────────────────┘                            │                    │
  ┌──────────────────────┐                            │                    │
  │       獲取評論        │<─── 帶有 token 發出請求 ───>│      平臺 API      │
  └──────────────────────┘                            │                    │
  ┌──────────────────────┐                            │                    │
  │       發表評論        ├──── 帶有 token 發出請求 ───>│                    │
  └──────────────────────┘                            └────────────────────┘
          ......
複製程式碼

使用者在平臺的授權頁面允許 Vssue 接入後，平臺會帶有 code 重定向回 Vssue 的頁面。

Vssue 將會根據 code 向平臺請求獲取使用者的 token，然後將 token 儲存在 localstorage 中，於是使用者就成功使用平臺的帳號“登入”了 Vssue。

接下來， Vssue 就可以獲取使用者的基本資訊、獲取當前頁面的評論，使用者也可以發表評論了。

使用 Vssue 的網站和專案

目前已經在使用 Vssue 做評論的部落格：

目前已經在使用 Vssue 做評論的 Vuepress 主題：

除了我自己的部落格和主題，還要感謝 @zhhlwd, @Bloss 兩位大佬嘗試使用我的輪子。

新人第一次發帖，歡迎大家提提建議，順便給個 Star 支援一下~

如果有大佬能幫忙設計個 LOGO 就更好了

相關文章