Vuepress 搭建带评论功能的静态博客的实现

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',								 
 2/3   首页 上一页 1 2 3 下一页 尾页