阅读 1183

vuepress和valine搭建带评论的博客

vuepress 搭建 blog

创建工程

  创建工程blog,初始化yarn init,添加依赖

  yarn add vuepress
复制代码

创建博客目录

  创建博客文件夹docs,该文件夹适用于编写文档用的,其中的每一个 markdown 文件(.md)都是可以看做一篇博客。当然最好在 docs 下面为各主题都创建一个单独的目录。

  每一个路径中默认的访问文件都是README.md,后面对于README.md文件的路径配置可以省略文件名,只用目录路径代替。

  |--blog
  |   |--docs
  |   |   |--README.md
  |   |   |--.vuepress
  |   |   |   |--config.js
  |   |   |--vuepress
  |   |   |   |--1.first.md
  |   |   |--koa
  ...
复制代码

配置文件

  而后在其中创建配置文件.vuepress/config.js

  config.js 中模块用于 vuepress 的除内容外的显示和系统相关的配置,例如配置侧边 bar、头部 bar、搜索栏、主题等等。如下:

module.exports = {
  title: 'johnshere的学习笔记',
  description: 'johnshere的学习笔记',
  head: [
    // ['link', { rel: 'icon', href: '/img/logo.ico' }],
    // ['link', { rel: 'manifest', href: '/manifest.json' }],
  ],
  base: '/blog/docs/',
  dest: '_dist/docs',
  themeConfig: {
    // nav: [
    //   { text: '主页', link: '/' },
    //   { text: '导读', link: '/essay/' },
    //   { text: 'External', link: 'https://google.com' }
    // ],
    sidebar: [{ title: 'vuepr2ess', children: ['/vuepress/1.first'] }],
    sidebarDepth: 2,
    lastUpdated: 'Last Updated'
  },
  markdown: {
    // 显示代码行号
    lineNumbers: true
  },
  plugins: [
    [
      '@vuepress/register-components',
      {
        componentsDir: './components'
      }
    ]
  ]
}
复制代码

启动命令配置

  可以在 package.json 中配置启停的快捷命令,如下:

{
  ...
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  ...
}
复制代码

  它们分别是开发和正式发布的命令。执行开发命令,开始开发自己的博客。

评论功能-Valine

  Valine 是一个第三方的评论模块,可用于集成于我们的系统。 官方网站网友使用

  官方网站更多的侧重在于他们系统的使用和功能,没有用过多的笔墨介绍如何在 vuepress 这样的地方如何集成。而这片网上浏览量较多的博文又语焉不详,不清楚的依然不清楚,了解的也学不到什么。

准备工作

账号

  使用时需要注册一个账号,可以注册一个开发学习用的账号,基本满足个人使用。下面使用时需要它提供的 appId 和 appKey。

依赖

# Install leancloud's js-sdk
npm install leancloud-storage --save

# Install valine
npm install valine --save
复制代码

1、组件引用

  vuepress 允许自定义组件,如果我定一个组件,在各个 md 文件中引用这个组件。这个组件中实现 Valine 的所需条件,即可以使用了。

自定义组件

  .vuepress/config.js配置文件中加入

 plugins: [
    [
      '@vuepress/register-components',
      {
        componentsDir: './components'
      }
    ]
  ]
复制代码

  这是设置自定义组件的位置。然后在.vuepress/components目录中创建文件Valine.vue,这是用于自定义自己的 Valine 组件。
  Valine.vue 的源码如下,这里我开启了阅读量统计。leancloud-visitors类所在的元素的 id 会用来识别页面所在位置。

<template>
  <section style="border-top: 2px solid #eaecef;padding-top:1rem;margin-top:2rem;">
    <div>
      <!-- id 将作为查询条件 -->
      <span class="leancloud-visitors"
            data-flag-title="Your Article Title">
        <em class="post-meta-item-text">阅读量: </em>
        <i class="leancloud-visitors-count"></i>
      </span>
    </div>
    <h3>
      <a href="javascript:;"></a>
      评 论:
    </h3>
    <div id="vcomments"></div>
  </section>
</template>

<script>
export default {
  name: 'Valine',
  mounted: function () {
    // require window
    const Valine = require('valine');
    if (typeof window !== 'undefined') {
      document.getElementsByClassName('leancloud-visitors')[0].id
        = window.location.pathname
      this.window = window
      window.AV = require('leancloud-storage')
    }

    new Valine({
      el: '#vcomments',
      appId: 'XXXXXXXXXXXXX',// your appId
      appKey: 'XXXXXXXXXXXXX', // your appKey
      notify: false,
      verify: false,
      path: window.location.pathname,
      visitor: true,
      avatar: 'mm',
      placeholder: 'write here'
    });
  },
}
</script>
复制代码

使用

  然后在你所写的 md 文件中使用这个标签就行,比如在最下面一行键入

  <Valine></Valine>
复制代码

  这样在文章最后就会使用这个组件,如下图。我这里开启了访问量统计功能,这个功能需要去 Valine 的控制台设置。

  这样做会有一个问题,就是评论系统,在页面结构中会被 vuepress 算在“内容”部分,这样会很奇怪。正常的认知评论部分应该在上下章和更新时间下面才对,而且当评论过多时,更为奇怪了。所以我更建议使用下面的方法来引入。

2、主题引用

我的目的很简单,通过修改主题的布局,把评论放到下面去。主题形式的修改有一个好处,就是不需要在每一个 md 文件中再重复引用了。

修改默认主题

我没有自己重新编写一个主题,就是复制了一下默认主题的内容,进行了修改。默认主题的路径在node_modules\vuepress\lib\default-theme\Layout.vue这个位置。在.vuepress/目录下创建theme/目录,并复制Layout.vue文件进行,调整其中所有引用依赖的文件不变,如:

import Home from './Home.vue'

改为

import Home from '../../../node_modules/vuepress/lib/default-theme/Home.vue'

这样默认主题就没有任何改变。
但是我在其中的Page组件下方增加了Valine组件,如下:

这样我就完成了,在不改变原默认主题的情况下,使评论放在 markdown 内容的下方。

Valine 调整

上面使其位置达到了,但是由于 dom 位置发生了变化,所以需要调整样式。按我的设想,应该除了样式以外<Valine>组件其他东西不需要调整。如下:

<template>
  <div class="page">
    <section class="page-edit">
      <div>
        <!-- id 将作为查询条件 -->
        <span class="leancloud-visitors"
              data-flag-title="Your Article Title">
          <em class="post-meta-item-text">阅读量: </em>
          <i class="leancloud-visitors-count"></i>
        </span>
      </div>
      <h3>
        <a href="javascript:;"></a>
        评 论:
      </h3>
      <div id="vcomments"></div>
    </section>
  </div>
</template>
复制代码

这里用到的 class,都是 vuepress 对 markdown 内容渲染时使用的样式。page,page-edit 都会随屏幕大小变化而变化,复用一下。

效果如下:

但是实际测试发现,这样放在主题中 Valine 组件变成一个公共组件了,不会在每次切换路由时都生成。所以改成监听路由变换时重新初始化数据。

<script>
export default {
  name: 'Valine',
  mounted: function () {
    // require window
    const Valine = require('valine');
    if (typeof window !== 'undefined') {
      this.window = window
      window.AV = require('leancloud-storage')
    }
    this.valine = new Valine()
    this.initValine()
  },
  watch: {
    $route (to, from) {
      if (from.path != to.path) {
        this.initValine()
      }
    }
  },
  methods: {
    initValine () {
      let path = location.origin + location.pathname
      // vuepress打包后变成的HTML不知为什么吞掉此处的绑定`:id="countId"`
      document.getElementsByClassName('leancloud-visitors')[0].id = path
      this.valine.init({
        el: '#vcomments',
        appId: 'XXXXXXXXXXXX',// your appId
        appKey: 'XXXXXXXXXXXXX', // your appKey
        notify: false,
        verify: false,
        path: path,
        visitor: true,
        avatar: 'mm',
        placeholder: 'write here'
      });
    }
  }
}
</script>
复制代码

www.liuj.fun/blog/docs/v…

关注下面的标签,发现更多相似文章
评论