給博客添加評論功能

沒有評論功能的博客總是不完整的。

於是動手給博客添加上了，基於以下：

• LeanCloud
  提供雲存儲服務
• Valine
  一款基於LeanCloud的快速、簡潔且高效的無后端評論系統

0.雲服務注冊

網址 > https://leancloud.cn/

0.1 創建應用：

創建應用需要實名認證，通過支付寶掃碼。

0.2 找到應用Keys

1.安裝以上兩個工具

npm install --save leancloud-storage valine

2.創建評論組件

創建文件/docs/.vuepress/components/Valine.vue

編輯為以下內容，並填入自己的AppId和AppKey

<template>
  <div>
    <hr>
    <div id="vcomments"></div>
  </div>
</template>

<script>
export default {
  name: 'Valine',
  mounted: function(){
    // require window 
    const Valine = require('valine');
    if (typeof window !== 'undefined') {
      this.window = window
      window.AV = require('leancloud-storage')
      
    }
     
    new Valine({
      el: '#vcomments',
      appId: '', // your AppId
      appKey: '', // your AppKey
      notify:false,
      verify:false,
      avatar:'mm',
      placeholder: '來了就說點什么吧~~~',
    });
  },
}
</script>

3.使用評論組件

只要在markdown文件文章的最下面添加上這個組件就可以了

<Valine></Valine>

效果就是這樣子：

4.另一種使用方式：作為VuePress博客的插件使用

上面的操作，已經是可以正常使用評論功能了，

不過，官方的打開方式是 在VuePress中使用

摘錄如下：

4.1 安裝

npm install --save vuepress-plugin-comment

或

yarn add vuepress-plugin-comment -D

4.2 快速使用

將vuepress-plugin-comment添加到vuepress項目的插件配置中：

module.exports = {
  plugins: [
    [
      'vuepress-plugin-comment',
      {
        choosen: 'valine', 
        // options選項中的所有參數，會傳給Valine的配置
        options: {
          el: '#valine-vuepress-comment',
          appId: 'Your own appId',
          appKey: 'Your own appKey'
        }
      }
    ]
  ]
}

---

以上。