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 元件支援傳入三個屬性：

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 屬性。

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，對作者也是一種鼓勵。

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. 效果展示

系列文章

相關文章

問題：多個頁面的評論混合在一起