趟过的坑
有些东西当你整出来以后,觉得很简单,但是对于后面的新人来说确实挺难的,尤其是啥也不懂的小白,我就是。
当你看到这篇文章的时候,我默认你已经能把基础的Vuepress工程建立好了,如果你还不会,那就不要继续往下看了。
很多人写文章讲Valine的时候就贴出代码,从来没告诉别人如何去获取AppID
和Key
,其实如果你知道在哪里获取,那么一切就很简单了。
安装插件
- 如果使用 npm:
npm install --save vuepress-plugin-comment
npm install --save valine
- 如果使用 yarn:
yarn add vuepress-plugin-comment -D
yarn add valine -D
注册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'
}
}
]
]
}
单页面使用(推荐)
单页面使用的理解就是:当你把基础配置的都配置完成后,你想在哪个页面指定配置评论功能,就可以在md文件中写<valine></valine>
来调用评论功能
单页面通过组件来实现功能
.vuepress/config.js
配置文件中加入
plugins: [
[
'@vuepress/register-components',
{
componentsDir: './components'
}
]
]
这是设置自定义组件的位置。然后在.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>
使用
然后在你所写的 md 文件中使用这个标签就行,比如在最下面一行键入
<Valine></Valine>