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
复制代码

一、组件引用

  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 算在“内容”部分，这样会很奇怪。正常的认知评论部分应该在上下章和更新时间下面才对，并且当评论过多时，更为奇怪了。因此我更建议使用下面的方法来引入。

二、主题引用

个人目的很简单，经过修改主题的布局，把评论放到下面去。主题形式的修改有一个好处，就是不须要在每个 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…