Vuepress使用Valine搭建带有评论系统的博客

Vuepress网站
vuepress

开始搭建vuepress-blog

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

接着，在 package.json 里加一些脚本:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

yarn docs:dev # 或者：npm run docs:dev

这只是很简单的搭建过程，具体的还得看文档哈。好了我们这里来看下评论如何做

选择一个第三方评论系统

gitment
来必立
Valine

前两者都是有厚实的长城，所以我建议各位就别想了

我选择了Valine，请大家看。

image.png

一开始看别人的博客网站觉得好厉害，原来都是有第三方评论插件的
Valine.js使用方法

下面我们就来看下如何使用吧，先自个儿进入注册一个然后配置个应用，我这边直接上代码了

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

<script>
export default {
  mounted: function(){
    this.createValine()
  },
  methods: {
    createValine() {
      const Valine = require('valine');
      window.AV = require('leancloud-storage')
      const valine =  new Valine({
        el: '#vcomments',
        appId: 'CKpF4Vtj20XxEMlje90vj',
        appKey: 'zTKKhe97IPCFES',
        notify: false,
        verify: false,
        avatar: 'monsterid',
        path: window.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 lang="stylus" rel="stylesheet/stylus">
#vcomments {
  max-width 740px
  padding 10px
  display block;
  margin-left auto;
  margin-right auto;
}
</style>

直接复制过去就好了