关于javascript:VuePress-博客优化之增加-Vssue-评论功能

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

本篇讲讲如何应用 Vssue 疾速的实现评论性能。

因为我用的是 vuepress-theme-reco 主题，主题内置评论插件 @vuepress-reco/vuepress-plugin-comments，能够依据本人的爱好抉择 Valine 或者 Vssue。

那咱们来介绍下 Vssue。

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

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

特点是反对多个代码托管平台，包含 GitHub、GitLab、Bitbucket、Gitee 和 Gitea。因为基于 Vue，能够作为 Vue 插件应用，轻松集成到 Vue 利用中。

你能够点击官网链接，进入首页，间接在页面的评论框中体验评论成果。

这里咱们应用 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。

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

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

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

这是有评论后的成果：

如果你想默认不加载评论，而只在某些页面显示评论性能，能够在 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 指南：

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

// .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',
    },
  },
};

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

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

参照 Vssue 提供的配置文档：

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

title

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

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

issueId

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

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

options

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

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

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

咱们来看看成果：

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

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

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

最初，我决定，不讲武德了，间接改 reco 内置的 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>

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

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

---
issueId: 228
---

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

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

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

关于javascript:VuePress-博客优化之增加-Vssue-评论功能

前言

主题内置

Vssue

开始

1. 创立 GitHub OAuth App

2. 批改 config.js

3. 成果展现

4. 评论局部开启

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

1. 装置插件

2. 应用插件

3. 应用 Vssue 组件

4. 成果展现

问题：评论区地位调整

1. 批改 vuepress-plugin-comments 源码

2. 批改 config.js

3. md 文件退出 issueId 属性

4. 成果展现

系列文章