快捷導(dǎo)航

Vuepress 搭建帶評論功能的靜態(tài)博客的實現(xiàn)

更新時間：2019年02月17日 15:14:39 作者：張煥標(biāo)33

這篇文章主要介紹了Vuepress 搭建帶評論功能的靜態(tài)博客的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

vuepress 是 Vue 驅(qū)動的靜態(tài)站點生成工具

本文僅介紹，搭建靜態(tài)博客的過程，具體教程及文檔請點擊進入 vuepress中文網(wǎng)

點擊查看項目代碼

vuepress初始化

下面初始化

# 將 github 新創(chuàng)建的倉庫克隆到本地
git clone git@github.com:zhb333/readme-blog.git

# 進入項目
cd readme-blog

# npm 初始化, 按照提示回車
npm init

# 安裝 vuepress
npm i vuepress -D

# 安裝 gh-pages
npm i gh-pages -D

# 創(chuàng)建一個 docs 目錄
mkdir docs

# 創(chuàng)建一個 markdown 文件
echo '# Hello VuePress' > docs/README.md

npm 腳本

然后，給 package.json 添加一些 scripts 腳本：

{
 "scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs",
  "deploy": "npm run build && gh-pages -d docs/.vuepress/dist"
 }
}

運行本地開發(fā)環(huán)境

運行 vurepress 的本地開發(fā)環(huán)境

npm run dev

訪問 localhost:8080 ，已經(jīng)成功開啟

基礎(chǔ)配置

生成靜態(tài)資源

執(zhí)行下面的命令，生成靜態(tài)資源

npm run build

默認(rèn)情況下，構(gòu)建的文件會位于 docs/.vuepress/dist 中，該文件可以通過 docs/.vuepress/config.js 中的 dest 字段進行配置。

配置

創(chuàng)建 docs/.vuepress/config.js，并進行簡單配置

var config = {

 // 靜態(tài)網(wǎng)站部署的目錄
 base: '/readme-blog/',

 // 網(wǎng)站標(biāo)題
 title: '標(biāo) の 博客',

 // <meta name="description" content="...">
 description: '種一棵樹最好的時間是十年前，其次是現(xiàn)在', 

 markdown: {
  
  // 顯示代碼行號
  lineNumbers: true
 }
}

module.exports = config

博客首頁

公共文件

創(chuàng)建 docs/.vuepress/public 用于存放公共文件

我在 public/ , 存在了 favicon.ico 圖標(biāo)，以及 zlx.jpg 首頁的頭像圖片

簡單的首頁編寫

將 docs/README.md設(shè)置為首頁，修改代碼為：

---
home: true
heroImage: /zlx.jpg
footer: MIT Licensed | Copyright © 2018 ZhangHuanbiao
---

設(shè)置網(wǎng)站 ico 圖標(biāo)

配置網(wǎng)站的 ico 圖標(biāo)，修改 .vuepress/config.js：

const config = {
 head: [
  ['link', { rel: 'icon', href: '/favicon.ico' }]
 ]
}

導(dǎo)航欄

配置導(dǎo)航欄

使用 vuepress 的默認(rèn)主題配置導(dǎo)航欄 .vuepress/config.js：

const nav = [
 {
  text: '前端棧',
  items: [
   { text: 'Vue', link: '/WEB/Vue/vuepress-blog' },
   { text: 'React', link: '/WEB/React/react-router' }
  ]
 }
]

const config = {
 themeConfig: {

  // 項目的 github 地址
  repo: 'zhb333/readme-blog',

  // github 地址的鏈接名
  repoLabel: '代碼',

  // 配置導(dǎo)航欄
  nav,
 },
}

創(chuàng)建有效的導(dǎo)航資源

為了使得導(dǎo)航欄的鏈接點擊有效，我們創(chuàng)建兩個文件：

docs/WEB/Vue/vuepress-blog.md

# 使用`vuepress`搭建靜態(tài)博客
## vuepress初始化
## 基礎(chǔ)配置
## 博客首頁
## 導(dǎo)航欄

docs/WEB/React/react-router.md

# react-router

側(cè)邊欄

側(cè)邊欄配置

使用 vuepress 的默認(rèn)主題配置側(cè)邊欄 .vuepress/config.js：

const sidebar = {
 '/WEB/': [
  {
   title: 'Vue',
   children: [
    'Vue/vuepress-blog'
   ]
  },

  {
   title: 'React',
   children: [
    'React/react-router'
   ]
  }
 ]
}

const nav = [
 {
  text: '前端棧',
  items: [
   { text: 'Vue', link: '/WEB/' + sidebar['/WEB/'][0]['children'][0] },
   { text: 'React', link: '/WEB/' + sidebar['/WEB/'][1]['children'][0] }
  ]
 }
]

var config = {
 themeConfig: {

  // 當(dāng)前 markdown 的 github 代碼鏈接
  editLinks: true,

  // 鏈接顯示的文本
  editLinkText: '查看原文|編輯此頁',

  nav,
  sidebar,
 },
}

側(cè)邊欄效果

訪問： http://localhost:8080/readme-blog/WEB/Vue/vuepress-blog.html，可以看到側(cè)邊欄已經(jīng)生成

將靜態(tài)博客網(wǎng)站部署到外網(wǎng)

使用 gh-pages 進行項目部署

npm run deploy

過幾分鐘后，訪問 https://zhb333.github.io/readme-blog/，便可以看到在外網(wǎng)成功部署的靜態(tài)博客

評論功能

我們使用 valine 來實現(xiàn)評論功能：

Valine - 一款快速、簡潔且高效的無后端評論系統(tǒng)。

點擊進入 Valine官網(wǎng) ，需要先注冊才能食用

安裝 Valine

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

# Install valine
npm install valine --save

注冊 vuepress 全局組件

創(chuàng)建 .vuepress/components/Valine.vue

<template>
 <div id="vcomments"></div>
</template>

<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')
   
  }
   
  new Valine({
   el: '#vcomments' ,
   appId: '',// your appId
   appKey: '', // your appKey
   notify:false, 
   verify:false, 
   avatar:'mm', 
   placeholder: 'just go go' 
  });
 },
}
</script>

使用 Valine

只需要在 markdown 中調(diào)用即可