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…