关于javascript: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',
      repo: 'NAME_OF_REPO',
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
    }
  }  
}

3. 成果展现

运行我的项目，就能够看到成果：

然而留神，在一开始没有评论的时候，须要点击图中的「点击创立 Issue」，能力失常的进行评论，当你点击「点击创立 Issue」的时候，你对应的 Github 仓库也会建设一条 issue，接下来的回复都会呈现在这条 issue 中。

这是有评论后的成果：

4. 评论局部开启

如果你想默认不加载评论，而只在某些页面显示评论性能，能够在 valineConfig 或 vssueConfig 中设置 showComment: false，并在须要展现评论的页面 设置 isShowComments: true。

如果仅是某篇文章不想设置开启评论性能，能够在 front-matter 设置 isShowComments: false。

问题：多个页面的评论混合在一起

如果你多在几个页面创立评论，你会发现，所有的评论都是在一起的，这是因为 Vssue 在尝试加载评论时，是依据 labels 和 title 来申请对应的 Issue。

参照 Vssue 的配置文档：https://vssue.js.org/zh/options/，其实咱们是能够配置 labels 等属性的，但因为咱们没有配置，所以申请的时候申请的都是同一条，天然就混合在了一起。

如果咱们只是做一个留言板，那倒没有什么问题，但比方我的是 TypeScript 文档，每篇文章的评论我必定心愿是离开的，那该怎么实现呢？

尽管咱们能够间接在 config.js 里这样写：

module.exports = {
  theme: 'reco',
  themeConfig: {
    vssueConfig: {
      platform: 'github',
      owner: 'OWNER_OF_REPO',
      repo: 'NAME_OF_REPO',
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
      labels: 'xxx'
    }
  }  
}

但如果不能动静的设置 lables，其实还是没有什么用。

最终我决定，不应用 reco 主题内置的这个评论插件，而是改为应用 Vssue 提供的插件，其实 reco 内置的这个评论插件是基于 Vssue 提供的插件进行的一层封装。

那怎么实现呢？参照 Vssue 提供的 VuePress 指南：

1. 装置插件

yarn add @vssue/vuepress-plugin-vssue -D
yarn add @vssue/api-github-v3 -D

2. 应用插件

// .vuepress/config.js

module.exports = {
  plugins: {
    '@vssue/vuepress-plugin-vssue': {
      platform: 'github',
      owner: 'OWNER_OF_REPO',
      repo: 'NAME_OF_REPO',
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
    },
  },
};

3. 应用 Vssue 组件

Vssue 曾经注册为 Vue 组件，你能够在你的 VuePress Markdown 文件中间接应用它。

 <template>
  <Vssue :issue-id="228" />
</template>

参照 Vssue 提供的配置文档：

Vssue 组件反对传入三个属性：

1. title

labels 和 title 是存储评论的对应 Issue 的标识符。

所以请确保不同页面的 Vssue 应用不同的 title。领有雷同 title 的 Vssue 会对应到同一个 Issue，也就会有同样的评论。

2. issueId

如果设置了 issueId，Vssue 将会间接应用它来确定要应用哪个 Issue，而不是依据 labels 和 title 来查找对应的 Issue。这会放慢 Vssue 的初始化过程。

然而在这种状况下，你必须要 手动创立 Issue。如果对应的 Issue 不存在，Vssue 不会尝试为你创立一个新的 Issue。

3. options

在 prop options 中设置的属性，会笼罩通过 Vue.use() 设置的属性。它能够接管 VssueOptions 中的所有配置。

你能够把通过 Vue.use() 设置的配置当作 Vssue 的 全局 / 默认 配置，把通过 prop options 设置的配置当作 部分 配置。

因为我翻译的 TypeScript 文档也同时同步在我的 GitHub 上，所以我心愿评论也是同步的，为此我抉择应用 issueId 来获取指定 issue 的评论数据，一般应用的话，还是应用自定义的 title 属性。

4. 成果展现

咱们来看看成果：

问题：评论区地位调整

上图之所以用红色矩形进行了标注，是想让大家留神到，因为咱们的 Vssue 组件代码是写在 md 文件里的，所以评论和内容是连在一起的，而更新工夫和上下文链接则是在底部的，如果评论内容比拟长的话，会略显奇怪。

那如果咱们像让评论区域呈现在最底部呢？该怎么实现呢？

为此我尝试了很多办法，比方在挂载的时候将 DOM 元素挪动到底部，在 enhanceApp.js 中挂载组件，但最终都以失败告终。

最初，我决定，不讲武德了，间接改 reco 内置的 vuepress-plugin-comments 组件源码：

1. 批改 vuepress-plugin-comments 源码

在 node_modules 中找到 vuepress-plugin-comments 的代码目录，批改 /.bin/Vssue.vue 文件：

// 组件加了一行 :issue-id="issueId"
<template>
  <VssueComponent
    class="vssue-wrapper"
    :issue-id="issueId"
    :key="key"
    :options="vssueOptions"
  />
</template>

// script 中退出 issueId 计算属性
<script>
export default {
  // ...
  computed: {vssueOptions () {// ...},
    issueId () {return this.$page.frontmatter.issueId || null}
  },
    // ...
}
</script>

2. 批改 config.js

module.exports = {
  theme: 'reco',
  themeConfig: {
  vssueConfig: {
      platform: 'github',
      owner: 'mqyqingfeng',
      repo: 'Blog',
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET'
   },
  }  
}

3. md 文件退出 issueId 属性

在每个 markdown 文件的最结尾增加 Front Matter，写入文章对应的 issueId：

---
issueId: 228
---

4. 成果展现

系列文章

博客搭建系列是我至今写的惟一一个偏实战的系列教程，预计 20 篇左右，解说如何应用 VuePress 搭建、优化博客，并部署到 GitHub、Gitee、公有服务器等平台。本篇为第 26 篇，全系列文章地址：https://github.com/mqyqingfeng/Blog

微信：「mqyqingfeng」，加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央，请务必给予斧正，非常感激。如果喜爱或者有所启发，欢送 star，对作者也是一种激励。