Add to blog Comments

No comments feature blog is always incomplete.

Then add on the hands to blog, based on the following:

LeanCloud
provide cloud storage service
Valine
section based LeanCloud fast, simple and efficient back-end without commenting system

0. cloud service registration

URL> https://leancloud.cn/

0.1 to create applications:

create-app

Creating applications that require real-name certification through Alipay scan code.

0.2 Application Keys Found

app-keys

1. install more than two tools

npm install --save leancloud-storage valine

2. Create comment assembly

Create a file`/docs/.vuepress/components/Valine.vue`

Edit the following, and fill their own AppIdandAppKey

<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. Use the comments section

As long as this component on the bottom Add markdown text on it

<Valine></Valine>

The effect is like this:

first-comment

4. Another use: as VuePress blog plug-ins

The above operation is already normal use the comment function,

However, the official Open is used in VuePress

Summarized as follows:

4.1 Installation

npm install --save vuepress-plugin-comment

yarn add vuepress-plugin-comment -D

4.2 Quick Start

Will be vuepress-plugin-commentadded to the vuepressplug-in configuration of the project:

module.exports = {
  plugins: [
    [
      'vuepress-plugin-comment',
      {
        choosen: 'valine', 
        // options选项中的所有参数，会传给Valine的配置
        options: {
          el: '#valine-vuepress-comment',
          appId: 'Your own appId',
          appKey: 'Your own appKey'
        }
      }
    ]
  ]
}

the above.