VuePress侧导航及自定义主题样式的配置
2021-01-11 本文已影响0人
懿左左
最近在公司领导安排给我一个任务就是看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' // 将会被设置为 <html> 的 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
安排
