vuepress-plugin-comment -use Valine

这里写目录标题

趟过的坑

有些东西当你整出来以后，觉得很简单，但是对于后面的新人来说确实挺难的，尤其是啥也不懂的小白，我就是。

当你看到这篇文章的时候，我默认你已经能把基础的Vuepress工程建立好了，如果你还不会，那就不要继续往下看了。

很多人写文章讲Valine的时候就贴出代码，从来没告诉别人如何去获取AppID和Key，其实如果你知道在哪里获取，那么一切就很简单了。

安装插件

如果使用 npm：

npm install --save vuepress-plugin-comment
npm install --save valine
1
2

如果使用 yarn:

yarn add vuepress-plugin-comment -D
yarn add valine -D
1
2

注册LeanCloud并获取appid和appkey

官方网站LeanCloud，注册你自己的账号并登录

AppID和AppKey稍后会用到，该步骤很关键。

评论分为两种，单页面使用或者多页面使用

多页面使用(不推荐)

多页面使用的理解就是：当你在Config.js中配置完成后，你的所有页面都自动被安排上了Valine功能，包括一些你不想要安排的页面也被安排上。

快速使用

将 vuepress-plugin-comment 添加到vuepress项目的插件配置中：

.\docs\.vuepress/config.js

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

单页面使用(推荐)

单页面使用的理解就是：当你把基础配置的都配置完成后，你想在哪个页面指定配置评论功能，就可以在md文件中写来调用评论功能

单页面通过组件来实现功能

.vuepress/config.js配置文件中加入

 plugins: [
    [
      '@vuepress/register-components',
      {
        componentsDir: './components'
      }
    ]
  ]
1
2
3
4
5
6
7
8

这是设置自定义组件的位置。然后在.vuepress/components目录中创建文件Valine.vue，这是用于自定义自己的 Valine 组件。
Valine.vue 的源码如下，这里我开启了阅读量统计。leancloud-visitors类所在的元素的 id 会用来识别页面所在位置。

<template>
  <section style="border-top: 2px solid #eaecef;padding-top:1rem;margin-top:2rem;">
    <div>
      <!-- id 将作为查询条件 -->
      <span class="leancloud-visitors"
            data-flag-title="Your Article Title">
        <em class="post-meta-item-text">阅读量： </em>
        <i class="leancloud-visitors-count"></i>
      </span>
    </div>
    <h3>
      <a href="javascript:;"></a>
      评 论：
    </h3>
    <div id="vcomments"></div>
  </section>
</template>

<script>
export default {
  name: 'Valine',
  mounted: function () {
    // require window
    const Valine = require('valine');
    if (typeof window !== 'undefined') {
      document.getElementsByClassName('leancloud-visitors')[0].id
        = window.location.pathname
      this.window = window
      window.AV = require('leancloud-storage')
    }

    new Valine({
      el: '#vcomments',
      appId: 'XXXXXXXXXXXXX',// your appId
      appKey: 'XXXXXXXXXXXXX', // your appKey
      notify: false,
      verify: false,
      path: window.location.pathname,
      visitor: true,
      avatar: 'mm',
      placeholder: 'write here'
    });
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

使用

然后在你所写的 md 文件中使用这个标签就行，比如在最下面一行键入