vuepress集成Valine评论系统

现阶段的vuepress还不支持评论系统,这里我们可以借用第三方的评论系统,Valine,具体的配置可以参看本链接,本文主要介绍vuepress的设置。

首先安装依赖

npm install leancloud-storage --save
npm install valine --save

添加评论系统,需要对主题就行修改,我是将vuepress的默认主题复制到/.vuepress/theme文件夹就行修改。

修改theme文件夹下的Page.vue文件,将Valine添加进去。

<template>
  <div class="page">
    <slot name="top" />

    <Content :custom="false" />

    <div class="page-edit">
      <div class="edit-link" v-if="editLink">
        <a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
        <OutboundLink/>
      </div>

      <div class="last-updated" v-if="lastUpdated">
        <span class="prefix">{{ lastUpdatedText }}: </span>
        <span class="time">{{ lastUpdated }}</span>
      </div>
    </div>

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

    <div class="page-nav" v-if="prev || next">
      <p class="inner">
        <span v-if="prev" class="prev"><router-link v-if="prev" class="prev" :to="prev.path">
            {{ prev.title || prev.path }}
          </router-link>
        </span>

        <span v-if="next" class="next">
          <router-link v-if="next" :to="next.path">
            {{ next.title || next.path }}
          </router-link></span>
      </p>
    </div>

    <slot name="bottom" />
  </div>
</template>

mounted()钩子函数中初始化

  mounted () {
    const Valine = require('valine')
    if (typeof window !== 'undefined') {
      window.AV = require('leancloud-storage')
    }
    new Valine({
      el: '#vcomments',
      appId: '',// your appId
      appKey: '', // your appKey
      notify: false,
      verify: false,
      avatar: 'mm',
      placeholder: 'just go go',
      meta: ['nick', 'mail']
    })
  }
最后更新时间: 10/4/2018, 10:04:06 PM