专栏首页Java开发者之家vuepress集成评论系统

vuepress集成评论系统

# Vuepress网站

vuepress

# 开始搭建vuepress-blog

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

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

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

1 2 3 4 5 6 7 8 9 10 11

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

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

1 2 3 4 5 6

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>

1 2 3 4 5

<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: 'piM1Wm7mzq4fsj7RfCCJ7slE-gzGzoHsz',
        appKey: 'vdSq43byXijVSfd0Y5qY0vf8',
        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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

<style lang="stylus" rel="stylesheet/stylus">
#vcomments {
  max-width 740px
  padding 10px
  display block;
  margin-left auto;
  margin-right auto;
}
</style>

1 2 3 4 5 6 7 8 9

# page.vue配置

加入以上代码即可完成真个评论系统,然后 yarn dev即可看到效果!

# 我的开源项目地址

vuepress-blog 欢迎star!mmm

我的blog

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 手把手教你用vuepress搭建自己的网站(3)

    有时候,我们想让我们的网站博客更加顺畅,用户体验更好,可以结合一些第三方的插件,开箱即用

    itclanCoder
  • Hexo博客集成码云评论系统

        使用码云的issues作为评论系统,就要使用码云来登录评论,所以需要在码云上配置第三方应用。

    試毅-思伟
  • 如何快速搭建好看的个人博客(完整配置与源码)

    博客地址 程序员成长指北(http://www.inode.club/) 可以先体验下。

    coder_koala
  • 【玩转腾讯云】云开发部署VuePress静态博客

    通过 node -v 命令查看本机是否安装,如果没有安装,参考node.js安装指南 根据电脑系统环境进行安装

    王秀龙
  • Vue.js最佳静态站点生成器对比

    在过去的几年中,Vue.js 已成为 Web 应用程序开发的流行选项。用户变多后,这个框架开始将触角伸向了静态站点生成,一个曾经由 React 统治的领域。

    winty
  • 借助 VuePress 和 GitBook ,10 分钟即可免费部署你的静态博客网站

    因为自己平时经常写博客,也有博客网站,所以 Leader 叫我做一个 CMS 的帮助中心的技术选型,CMS 的帮助中心的功能:是通过文章来教用户如何使用我们的项...

    夜尽天明
  • 5 分钟搭建一个简洁优雅的静态博客

    一开始我遇到这个问题,总觉得自己弄个博客,太麻烦了,也不一定坚持写下去,直接在平台上写得了。于是 CSDN、简书、知乎上开始写。

    somenzz
  • 除了 GitHub,VuePress 现在可以用云开发来部署了!

    VuePress 是社区广受好评的文档插件,不少的项目都开始使用 VuePress 来构建团队的文档、产品的官网。现在,你也可以在云开发上托管你的 VuePre...

    腾讯云开发TCB
  • vuepresss建站过程中遇到的一些问题

    当你访问 /guide/而 404 时,这是由于guide目录下缺乏了它对应的 README.md文件

    itclanCoder
  • vuepress建站过程中遇到的一些问题

    当你访问 /guide/而 404 时,这是由于guide目录下缺乏了它对应的 README.md文件

    itclanCoder
  • 手把手教你用vuepress搭建自己的网站(1)

    如果说阅读是知识的输入,那么写作就是知识的输出,输出是一个内化知识理解的过程,有些知识,一问,知道,一动手,不会,看似简单,一看就会,一做就废,凡是不被自己吸收...

    itclanCoder
  • Valine 评论系统

    注册 Leancloud 并新建一个应用,获取 APP ID 及 APP KEY 然后引入 HTML

    Fred Liang
  • 为你的VuePress博客添加GitTalk评论

    在 Github 设置中找到 Settings / Developer settings / OAuth Apps / new OAuth Apps, 创建一个...

    小皮咖
  • 为你的VuePress博客添加GitTalk评论

    在 Github 设置中找到 Settings / Developer settings / OAuth Apps / new OAuth Apps, 创建一个...

    小皮咖
  • 一看就会的保姆级教程,10分钟搭建个人博客

    相信很多人都想拥有一个自己的个人博客,现有的个人博客搭建框架已经有很多了,例如 hexo 、vuepress 、jekyll 等等,这里我选用 vuepress...

    @零一
  • django之评论系统及多级评论

    相对来说,评论其实是另外一个比较独立的功能。Django 提倡,如果功能相对比较独立的话,最好是创建一个应用,把相应的功能代码写到这个应用里。我们的第一个应用叫...

    菲宇
  • 基于VuePress快速搭建一套项目知识管理工具

    GitHub地址:https://github.com/chenshuaikang/ShareDoc

    迟恩
  • [原创]VuePress教程之深入理解插件API

    Pluggable是 VuePress 1.x 的最重大改变。 vuepress 提供给开发者许多 API 来打造他们的插件,VuePress 本身的许多功能也...

    极客中心
  • Hexo博客集成Gitment评论

    試毅-思伟

扫码关注云+社区

领取腾讯云代金券