VuePress 博客優(yōu)化之增加 Vssue 評論功能

在 《一篇帶你用 VuePress + Github Pages 搭建博客》^[1]中，我們使用 VuePress 搭建了一個博客，最終的效果查看：TypeScript 中文文檔^[2]。

本篇講講如何使用 Vssue 快速的實現(xiàn)評論功能。

主題內(nèi)置

因為我用的是 vuepress-theme-reco 主題，主題內(nèi)置評論插件 @vuepress-reco/vuepress-plugin-comments，可以根據(jù)自己的喜好選擇 Valine 或者 Vssue。

那我們來介紹下 Vssue。

Vssue

官網(wǎng)：https://vssue.js.org/zh/^[3]

Vssue 是一個 Vue 驅(qū)動的、基于 Issue 的評論插件。

特點是支持多個代碼托管平臺，包括 GitHub、GitLab、Bitbucket、 Gitee 和 Gitea。因為基于 Vue，可以作為 Vue 插件使用，輕松集成到 Vue 應用中。

你可以點擊官網(wǎng)鏈接，進入首頁，直接在頁面的評論框中體驗評論效果。

開始

1. 創(chuàng)建 GitHub OAuth App

這里我們使用 GitHub 作為托管平臺，打開 GitHub 的開發(fā)者設置：https://github.com/settings/developers^[4]

選擇「Oauth Apps」，然后點擊「Register a new application」:

為了方便本地測試，Homepage URL 和 Authorization callback URL 我們都寫成 http://localhost:8080，創(chuàng)建應用后，我們再點擊 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. 效果展示

運行項目，就可以看到效果：

但是注意，在一開始沒有評論的時候，需要點擊圖中的 「點擊創(chuàng)建 Issue」，才能正常的進行評論，當你點擊「點擊創(chuàng)建 Issue」的時候，你對應的 Github 倉庫也會建立一條 issue，接下來的回復都會出現(xiàn)在這條 issue 中。

這是有評論后的效果：

4. 評論部分開啟

如果你想默認不加載評論，而只在某些頁面顯示評論功能，可以在 valineConfig 或 vssueConfig 中設置 showComment: false，并在需要展示評論的頁面 設置 isShowComments: true。

如果僅是某篇文章不想設置開啟評論功能，可以在 front-matter 設置 isShowComments: false。

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

如果你多在幾個頁面創(chuàng)建評論，你會發(fā)現(xiàn)，所有的評論都是在一起的，這是因為 Vssue 在嘗試加載評論時，是根據(jù) labels 和 title 來請求對應的 Issue。

參照 Vssue 的配置文檔：https://vssue.js.org/zh/options/^[5]，其實我們是可以配置 labels 等屬性的，但因為我們沒有配置，所以請求的時候請求的都是同一條，自然就混合在了一起。

如果我們只是做一個留言板，那倒沒有什么問題，但比如我的是 TypeScript 文檔，每篇文章的評論我肯定希望是分開的，那該怎么實現(xiàn)呢？

雖然我們可以直接在 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'
????}
??}??
}

但如果不能動態(tài)的設置 lables ，其實還是沒有什么用。

最終我決定，不使用 reco 主題內(nèi)置的這個評論插件，而是改為使用 Vssue 提供的插件，其實 reco 內(nèi)置的這個評論插件是基于 Vssue 提供的插件進行的一層封裝。

那怎么實現(xiàn)呢？參照 Vssue 提供的 VuePress 指南^[6]：

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 已經(jīng)注冊為 Vue 組件，你可以在你的 VuePress Markdown 文件中直接使用它。

?