VuePress侧导航及自定义主题样式的配置

最近在公司领导安排给我一个任务就是看vuepress文档，及写出来实现文档（也可以写博客）。其实可能有的大多都是用的GitBook（写文档或者博客）。言归正传哈，说实话这几天看vuepress官方文档时，看前面的也很好理解，后期的有些配置看的真是云里雾里的，看文档都看成这样都想说自己了。刚开始写的时候发现自己还很傻，按着官方教程创建好项目后，我竟然在README.md里写了好久的东西（尤其那个表格写完之后觉得更智障了）。遇到的问题去度娘那寻找解决方案，发现关于vuepress的帖子真的少，我这遇到的问题还是自己总结一下吧。（说下用vuepress写文档真不是一直在README.md里一直写的，可以在电脑上下载一个Typora，这个Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术。下载之后可以把创建的项目里的docs文件夹导入到Typora操作写文档，像表格直接选择插入表格就好，各种都很方便的。 ）

1、首先我先把我的项目目录结构展示如下

微信截图_20210111172454.png

微信截图_20210111171208.png

2、config.js配置文件

config.js里面包含了系统头部导航、左侧菜单、系统插件等配置。
config.js的路径为doc/.vupress/config.js，内容如下

const path = require('path')  //自定义样式里需要引入path
module.exports = {
  title: '懿左左❀笔记',  // 设置网站标题
  description: 'Just playing around',
  palette: path.resolve(__dirname, 'palette.styl'),   //palette.style就是styles里边的文件，此文件就是写的自定义主题样式
  configureWebpack: {
    resolve: {
      alias: {
        '@alias': 'path/to/some/dir'
      }
    }
  },
  plugins: [],
  markdown: {
    lineNumbers: true,
    anchor: { permalink: false }
  },
  locales: {
    // 键名是该语言所属的子路径
    // 作为特例，默认语言可以使用 '/' 作为其路径。
    '/': {
      lang: 'en-US' // 将会被设置为  的 lang 属性
    },
    '/zh/': {
      lang: 'zh-CN'
    }
  },
   //想要使侧边栏（Sidebar）生效，需要配置 themeConfig.sidebar
  themeConfig: {
    nav: [ // 导航栏
      {text: '主页', link: '/'}
    ],
    // 在sidebar配置侧导航栏
    sidebar: [
      {
        title: '前端',
        collapsable: false,
        sidebarDepth: 1,
        children: [
          { title: '前端内容', path: '/web/' },
          { title: '前端01', path: '/web/web01' },
          { title: '前端02', path: '/web/web02' },
          { title: '前端03', path: '/web/web03' }
        ]
      },
      {
        title: '学习',
        collapsable: true,
        sidebarDepth: 1,
        children: [
          { title: '第零节', path: '/study/' },
          { title: '第一节', path: '/study/study01' },
          { title: '第二节', path: '/study/study02' },
          { title: '第三节', path: '/study/study03' }
        ]
      }
    ]
  }
}

3、palette.styl文件内容

$accentColor = green  //默认主题颜色
$textColor = #333333  //默认字体颜色
$borderColor = #eaecef  //默认边框颜色
$codeBgColor = #282c34  //默认背景颜色
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
  opacity :1
}

效果展示如下：

微信截图_20210111184246.png

安排