Vssue - 簡單幫 Vuepress Blog 加上留言功能

Ken   in Taipei, Taiwan

# Vssue (opens new window) 簡介

Vssue (opens new window) 是基於 issue 的留言功能，並且支援很多平台。

  • GitHub OAuth App
  • GitLab Application
  • BitBucket OAuth Consumer
  • Gitee Third Party Application
  • Gitea Application

這邊就主要是使用 Github 更多資訊可以直接去他的官方網站 (opens new window)看看。

# config vuepress

其實 @vuepress/theme-blog 這個官方的 Blog 主題就有整合 Vssue (opens new window) 所以只需要加入以下設定。

module.exports = {
  theme: '@vuepress/theme-blog',
  themeConfig: {
    comment: {
      service: 'vssue',
      owner: 'OWNER_OF_REPO', // example: kengp3
      repo: 'NAME_OF_REPO', // example: blog
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

而 clientId, clientSecret 需要去申請 GitHub OAuth App (opens new window) 取得。

# 申請 GitHub OAuth App

  1. Settings > Developer settings > OAuth Apps
    goto setting page
  2. click 'New OAuth App' > 填寫資料
    input
  3. 申請成功就會看到一組 clientId, clientSecret
    success

把它複製到剛剛的設定檔那邊就可以了。

當然 clientSecret 最好也是不要直接寫在設定檔之中，建議設定在 Travis CI 的環境變數中。

Vssue 簡介
config vuepress
申請 GitHub OAuth App