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

固然這對於大多數人來講都是很簡單的問題，自vuepress公開之後，有太多筒子想要vuepress添加評論系統，但是目測大佬們並無這個想法，不過對於vue.js生態環境而言，給咱們不少本身動手的可能。下面請食用個人開發方法。

選擇一個第三方評論系統

1. gitment
2. 來必立
3. Valine

前二者都是有厚實的長城，因此我建議各位就別想了，雖然有搭建過的blog。若是有想了解的請看VuePress 集成第三方評論模塊。

我選擇了Valine，請你們看。

看到上面是否是以爲挺好看...接下來開發

Valine食用方法

Valine.js食用方法

開發代碼

comments.vue

<template>
  <div class="vcomment" v-if="data.comments === true">
    <div id="vcomments"></div>
  </div>
</template>

<script>
import { isActive, hashRE, groupHeaders } from '../util'
export default {
  computed: {
    data () {
      return this.$page.frontmatter
    },
  },
  mounted: function(){
    this.createValine()
  },
  
  methods: {
    createValine() {
      const Valine = require('valine');
      window.AV = require('leancloud-storage')
      const valine =  new Valine({
        el: '#vcomments',
        appId: '',
        appKey: '',
        notify: false,
        verify: false,
        avatar: 'monsterid',
        path: window.location.pathname,
        placeholder: '歡迎留言與我分享您的想法...',
      });
      this.valineRefresh = false
    }
  },
  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>

page.vue配置

加入以上代碼便可完成真個評論系統，而後 yarn dev便可看到效果！

個人開源項目地址

vuepress-blog 歡迎star！mmm

個人blog

關注個人微信公衆帳號,分享更多~