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

2019-11-19 12:07:49

字體：大中小

來源：轉載

供稿：網友

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

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

點擊查看項目代碼

vuepress初始化

下面初始化

# 將 github 新創建的倉庫克隆到本地git clone git@github.com:zhb333/readme-blog.git# 進入項目cd readme-blog# npm 初始化, 按照提示回車npm init# 安裝 vuepressnpm i vuepress -D# 安裝 gh-pagesnpm 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: trueheroImage: /zlx.jpgfooter: 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-sdknpm install leancloud-storage --save# Install valinenpm 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 中調用即可