VuePress 部落格優化之增加 Valine 評論功能

冴羽發表於2022-03-09
Vue優化

前言

在 《一篇帶你用 VuePress + Github Pages 搭建部落格》中，我們使用 VuePress 搭建了一個部落格，最終的效果檢視：TypeScript 中文文件。

本篇講講如何使用 Valine 快速的實現評論功能。

主題內建

因為我用的是 vuepress-theme-reco 主題，主題內建評論外掛 @vuepress-reco/vuepress-plugin-comments，可以根據自己的喜好選擇 Valine 或者 Vssue。本篇講講使用 Valine 實現評論功能的全過程。

Valine

官網：https://valine.js.org/

Valine 誕生於2017年8月7日，是一款基於 LeanCloud 的快速、簡潔且高效的無後端評論系統。

特點是安全、快速、支援 Emoji、無後端實現、MarkDown 全語法支援、輕量易用等。

LeanCloud

Valine 是基於 LeanCloud 的，LeanCloud 官網：https://www.leancloud.cn/

LeanCloud 是一種 Serverless 雲服務，提供了一站式的後端服務，如資料儲存、即時通訊等等，簡單的來說，比如我要實現一個資料儲存功能，我只用在 LeanCloud 註冊一個賬號，獲得對應的 App ID 和 App Key，然後呼叫提供的 API 即可進行資料儲存，以下是一個使用 JavaScript 語法的方式：

開始

有了一個基本的瞭解，我們開始吧。

1. 註冊

註冊 LeanCloud：https://leancloud.cn/dashboard/login.html#/signup

注意要使用 LeanCloud 的服務，需要完成實名認證，在填寫完姓名和身份證號後，需要使用對應名字的支付寶賬號掃碼進行認證，掃碼完後即可完成實名認證。

2. 建立應用

登入後, 進入控制檯後點選左下角「建立應用」：

建立應用裡，這裡我們選擇開發版，開發版有用量限制，比如 API 請求 3W 次每天，資料儲存空間 1GB，對於個人專案是夠用的：

3. 檢視應用憑證

建立完後，點選進入應用的管理後臺，選擇 「設定 」- 「應用憑證」，然後就能看到你的 APP ID 和 APP Key了：

4. VuePress 引入

修改 config.js：

module.exports = {
  theme: 'reco',
  themeConfig: {
    valineConfig: {
      appId: '...',// your appId
      appKey: '...', // your appKey
    }
  }  
}

5. 效果展示

在每篇文章的底部就會出現一個評論欄：

6. 不展示評論

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

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

更多的配置和注意細節，參考：

  1. vuepress-theme-reco 評論功能
  2. Valine 配置項

系列文章

部落格搭建系列是我至今寫的唯一一個偏實戰的系列教程，預計 20 篇左右，講解如何使用 VuePress 搭建、優化部落格，並部署到 GitHub、Gitee、私有伺服器等平臺。本篇為第 23 篇，全系列文章地址：https://github.com/mqyqingfeng/Blog

微信：「mqyqingfeng」，加我進冴羽唯一的讀者群。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章