vuepress搭建个人技术博客

vuepress是一个静态网站生成器，由vue驱动的主题系统和api，支持markdown语法，可以利用开发属于自己的技术博客或技术文档。
官网：https://www.vuepress.cn

下载安装vuepress

1.下载vuepress

全局安装（没尝试过）
npm install -g vuepress

本地安装
npm install -D vuepress

2.初始化package.json文件

npm init

3.在package.json文件添加命令

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

运行vuepress

1.根目录创建docs文件夹（总的目录，存放配置和文件，所有的文件的相对路径都是根据这个文件夹来的。）
2.docs文件夹创建一个README.md文件（配置首页），使用markdown语法。

3. npm run dev启动，npm run build,打包。

注意可能出现无法启动的情况，切换node版本尝试，（12.16.0）

默认主题首页配置

1. 主题的首页配置在根目录(docs)的README.md文件中进行设置。
2. 首页展示的heroImage路径在.vuepress里面的public文件夹中，直接将图片放里面就好了。

vuepress的文件夹名称都是设置好的，不要篡改。

---
home: true //是否使用Vuepress默认主题
heroImage: /logo.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   //底部文字
---

导航栏配置

1. 导航栏的配置，需要在.vuepress文件夹中的config.js（配置文件的入口文件）中进行配置。
2. 在nav中配置顶部导航，text设置导航标题，link设置点击跳转的链接，items设置下拉的子菜单。
3. 在sidebar中设置侧边导航，侧边导航有两种，一种是每一个顶部导航都有一个侧边导航与之对应，还有一种就是所有的顶部导航共用一个侧边栏导航。

module.exports={
    title:"xukeler的博客", //网站标题
    description:"这是一个关于技术分享的博客", //网站描述
    base："/", //部署路径，如果部署在服务器根目录就不用设置
    themeConfig: { //主题设置
        logo: '/logo.png',  //导航logo
        sidebarDepth:2,
        nav: [   //顶部导航
            { text: '首页', link: '/' },
            { text: '前端开发', link: '/blog/web/' },
            { text: '后端开发', link: '/blog/server/' },
            { text: '爱好', link: '/blog/interest/' },
            { 
              text: '其它', 
              link: '/blog/other/' ,
              items: [
                { text: 'Group1', link:"/" },
                { text: 'Group2', link:"/" }
              ]},
          ],
          sidebar:[ //侧边导航
           {   //侧边栏分组 
              title: 'Vue', 
              collapsable: true, 
              sidebarDepth:2,
              children: [
                ['/blog/web/vue',"vue" ],
                ['/blog/web/vue通信',"vue通信"] 
              ]
            }
          ]
      },

}

多个侧边栏的配置