1.VuePress是什么?(直接上效果图)
vuepress中文网:http://caibaojian.com/vuepress/guide/
2.安装vuepress
# 初始化 npm
npm init -y
# 安装
yarn global add vuepress # 或者:npm install -g vuepress
# 新建一个 docs 文件夹
mkdir docs
# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md
3.创建相关文件目录直接上图
我创建的比较简单可以自行根据文档配置
4.vuepress主题自定义(颜色,样式)这也是这篇文章的重点!!!
vuepress默认两个版本分别为0x和1.x这个主题色修改样式修改可谓是个大坑!!我找了半天也没找到百度也百度不到,现在解决了,分享给大家省的走弯路!
1.首先确认自己的vuepress版本,默认安装最新版本1.0x所以我就直接介绍1.0x样式修改
2.在.vuepress下面创建styles/palette.styl(如图)
3.palette.styl文件内容
$accentColor =blue//默认主题颜色
$textColor = red//默认字体颜色
$borderColor = #eaecef//默认边框颜色
$codeBgColor = #282c34//默认背景颜色
//示例修改相关样式f12找到需要修改的地方找到对应class类拿过来直接用就行了
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
opacity :1
}
效果展示
成功修改!!!!
最后附上源码github地址:https://github.com/zhangao0605/vuepress
希望对大家有帮助,大家记得给点个赞哦 !