vuepress和valine搭建帶評論的部落格

johnshere發表於2019-01-03
Vue

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和valine搭建帶評論的部落格

  這樣做會有一個問題，就是評論系統，在頁面結構中會被 vuepress 算在“內容”部分，這樣會很奇怪。正常的認知評論部分應該在上下章和更新時間下面才對，而且當評論過多時，更為奇怪了。所以我更建議使用下面的方法來引入。

vuepress和valine搭建帶評論的部落格

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元件，如下：

vuepress和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 都會隨螢幕大小變化而變化，複用一下。

效果如下：

vuepress和valine搭建帶評論的部落格
但是實際測試發現，這樣放在主題中 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…

相關文章