vuePress-快速搭建博客

在线demo

创建一个新目录并初始化

mkdir vuepress-blog && cd vuepress-blog

yarn init

安装vuepress

yarn add -D vuepress

目录配置

├── docs
│   └── .vuepress //用于存放全局的配置，组件及静态资源等
│       ├── public //静态资源目录
│       └── config.js //配置文件的入口文件
└── package.json

请检查package.json内是否有如下代码以确保项目能正常启动

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

主题配置

默认主题配置

默认主题提供了基本的布局, 搜索栏并提供了相应选项可自定义导航栏，侧边栏等内容 docs/README.md

---
home: true //必须项(若使用默认主题)
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

自定义主题配置

相关配置可参照官网vuepress
下面推荐一个简洁的博客主题vuepress-theme-reco,拆封即食

导航栏配置

如下代码中的 nav 即为导航栏的相关配置 docs/.vuepress/config.js

module.exports = {
  title: 'VuePress-blog',
  description: '',
  themeConfig: {
    nav: [
      { text: '主页', link: '/' },
      { text: '基础', items: [
        // link的地址可以为两种模式, 1. 项目内地址 2.外链 例:https://developer.mozilla.org/zh-CN/
        { text: 'HTML', link: '/rudiments/HTML' }, 
        { text: 'CSS', link: '/rudiments/CSS' },  //此两种地址系统会自动识别
        { text: 'JS', link: '/rudiments/JS' },
        { text: 'MDN', link: 'https://developer.mozilla.org/zh-CN/' }
      ]},
      { text: '框架', items: [
        { text: 'VUE', link: '/frame/vue' },
        { text: 'react', link: '/frame/react' },
      ]},
      { text: 'nodeJS', link: '/nodeJS/' }
    ],
    logo: '/longmao.jpeg' //头部标题logo, 默认地址在public内
  },
  base: '/vuepress-blog/' // 'vuepress-blog'为仓库名，视各人仓库名自行设置
}

配置完成后,相应目录结构

.
├── docs
│   ├── .vuepress //用于存放全局的配置，组件及静态资源等
│   │   ├── public //静态资源目录
│   │   └── config.js //配置文件的入口文件
│   ├── rudiments
│   │   ├── HTML.md
|   |   ├── CSS.md
│   │   └── JS.md
│   ├── frame
│   │   ├── vue.md
│   │   └── react.md
│   └── nodeJS
│       └── README.md
└── package.json

侧边栏配置

自动生成侧边栏

themeConfig:{
  sidebar: 'auto' // 自动生成所有页面的侧边栏
}

自定义侧边栏

themeConfig: {
    sidebar: [
      {
        title: '框架',   // 设置侧边栏标题
        path: '/frame/',      // 注意此处是绝对路径
        collapsable: false, // 决定侧边栏展开状态
        sidebarDepth: 2,    // 侧边栏纵深,设为1将会读取h2标题，设为2则会同时读取h2和h3标题
        children: [
          { title: 'react', path:'/frame/react'},
          { title: 'vue', path: '/frame/vue' }
        ]
      }
    ]     
  }

启动项目

npm run docs:dev