vuepress 使用与主题自定义样式修改

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

希望对大家有帮助，大家记得给点个赞哦 !