阅读 308

Vssue - 又一个用 Issue 给静态页面做评论的插件

Vssue 简介

如果你知道 GitmentGitalk,那么 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 就更好了