1.注册 leanClound 账号创建一个开发应用获取 AppID 和 AppKey
2.安装valine包 npm i valine –save
3.创建comment.vue组件
<template>
<div class="vcomment">
<div id="vcomments"></div>
</div>
</template>
<script>
export default {
mounted: function(){
this.createValine()
},
methods: {
createValine() {
import('valine').then(Valine=>{
new Valine.default({
el: '#vcomments',
appId: '',
appKey: '',
notify: false,
verify: false,
avatar: 'monsterid',
path: location.pathname,
placeholder: '欢迎留言与我分享您的想法...',
});
})
}
},
watch: {
'$route' (to, from) {
if(to.path !== from.path){
setTimeout(() => {
//重新刷新valine
this.createValine()
}, 300)
}
/**
* TODO:
* 1. 使用其他方法更新评论组件 或者使用其他较为好用的评论组件
* 2. 添加categories and tag
* 3. 更换其他主题
*/
}
}
}
</script>
<style scoped>
#vcomments {
max-width:740px;
padding:10px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
- 本文作者: MrRetro博客
- 本文链接: http://mrretro.gitee.io/retroblog/retroblog/2021/07/11/选择无后端的评论第三方库【valine】/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!