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

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

# 進(jìn)入項(xiàng)目
cd readme-blog

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

# 安裝 vuepress
npm i vuepress -D

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

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

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

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

npm run dev

npm run build

var config = {

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

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

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

 markdown: {
  
  // 顯示代碼行號(hào)
  lineNumbers: true
 }
}

module.exports = config

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

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

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

const config = {
 themeConfig: {

  // 項(xiàng)目的 github 地址
  repo: 'zhb333/readme-blog',

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

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

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

# react-router

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,
 },
}

npm run deploy

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

# Install valine
npm install valine --save

<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></Valine>