Vuepress 搭建帶評論功能的靜態博客的實現

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

vuepress 是 Vue 驅動的靜態站點生成工具

本文僅介紹，搭建靜態博客的過程，具體教程及文檔請點擊進入 vuepress中文網

點擊查看項目代碼

vuepress初始化

下面初始化

# 將 github 新創建的倉庫克隆到本地
git clone [email protected]:zhb333/readme-blog.git

# 進入項目
cd readme-blog

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

# 安裝 vuepress
npm i vuepress -D

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

# 創建一個 docs 目錄
mkdir docs

# 創建一個 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"
 }
}

運行本地開發環境

運行 vurepress 的本地開發環境

npm run dev

訪問 localhost:8080 ， 已經成功開啓

基礎配置

生成靜態資源

執行下面的命令，生成靜態資源

npm run build

默認情況下，構建的文件會位於 docs/.vuepress/dist 中，該文件可以通過 docs/.vuepress/config.js 中的 dest 字段進行配置。

配置

創建 docs/.vuepress/config.js， 並進行簡單配置

var config = {

 // 靜態網站部署的目錄
 base: '/readme-blog/',

 // 網站標題
 title: '標 の 博客',

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

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

module.exports = config

博客首頁

公共文件

創建 docs/.vuepress/public 用於存放公共文件

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

簡單的首頁編寫

將 docs/README.md設置爲首頁， 修改代碼爲：

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

設置網站 ico 圖標

配置網站的 ico 圖標， 修改 .vuepress/config.js：

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

導航欄

配置導航欄

使用 vuepress 的默認主題配置導航欄 .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: '代碼',

  // 配置導航欄
  nav,
 },
}

創建有效的導航資源

爲了使得導航欄的鏈接點擊有效， 我們創建兩個文件：

docs/WEB/Vue/vuepress-blog.md

# 使用`vuepress`搭建靜態博客
## vuepress初始化
## 基礎配置
## 博客首頁
## 導航欄

docs/WEB/React/react-router.md

# react-router

側邊欄

側邊欄配置

使用 vuepress 的默認主題配置側邊欄 .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: {

  // 當前 markdown 的 github 代碼鏈接
  editLinks: true,

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

  nav,
  sidebar,
 },
}

側邊欄效果

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

將靜態博客網站部署到外網

使用 gh-pages 進行項目部署

npm run deploy

過幾分鐘後，訪問 https://zhb333.github.io/readme-blog/， 便可以看到在外網成功部署的靜態博客

評論功能

我們使用 valine 來實現評論功能：

Valine - 一款快速、簡潔且高效的無後端評論系統。

點擊進入 Valine官網 ，需要先註冊才能食用

安裝 Valine

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

# Install valine
npm install valine --save

註冊 vuepress 全局組件

創建 .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 中調用即可

<Valine></Valine>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。