VuePress 博客优化之增加 Vssue 评论功能

前言

在 《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用 VuePress 搭建了一个博客，最终的效果查看：TypeScript 中文文档。

本篇讲讲如何使用 Vssue 快速的实现评论功能。

主题内置

因为我用的是 vuepress-theme-reco 主题，主题内置评论插件 @vuepress-reco/vuepress-plugin-comments，可以根据自己的喜好选择 Valine 或者 Vssue。

本篇讲讲使用 Vssue 实现评论功能的全过程。

Vssue

官网：https://vssue.js.org/zh/

Vssue 是一个 Vue 驱动的、基于 Issue 的评论插件。

特点是支持多个代码托管平台，包括 GitHub、GitLab、Bitbucket、 Gitee 和 Gitea。因为基于 Vue，可以作为 Vue 插件使用，轻松集成到 Vue 应用中。

你可以点击官网链接，进入首页，直接在页面的评论框中体验评论效果。

开始

1. 创建 GitHub OAuth App

这里我们使用 GitHub 作为托管平台，打开 GitHub 的开发者设置：https://github.com/settings/developers​

选择「Oauth Apps」，然后点击「Register a new application」:

为了方便本地测试，Homepage URL 和 Authorization callback URL 我们都写成 http://localhost:8080，创建应用后，我们再点击 Generate a new client secret 生成 Client secrets：

最后就会获取 Client ID 和 Client secrets。

2. 修改 config.js

module.exports = {
   
  theme: 'reco',
  themeConfig: {
   
    vssueConfig: {
   
      platform: 'github',
      owner: 'OWNER_OF_REPO'