主题配置

更新项目结构

project
├─── docs
│   ├── README.md
│   ├── frontEnd
│   │   └── README.md
│   ├── backEnd
│   │   └──README.md
│   └── .vuepress
│       ├── public
│       ├── override.styl
│       ├── config.js
│       ├── nav-config.js
│       └── sidebar-config.js
└── package.json

首页配置

• 默认的主题提供了一个首页（Homepage）的布局
• 想要使用它，需要在你的根级 README.md 的 YAML front matter 指定 home: true。
• 任何 YAML front matter 之后额外的内容将会以普通的 markdown 被渲染，并插入到 features 的后面。

---
home: true
heroImage: /hero.png
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
---

导航栏配置

使用 nav-config.js 进行导航栏配置

module.exports = [
  { text: "主页", link: "/" },
  {
    text: "博文",
    items: [
      { text: "前端", link: "/frontEnd/" },
      { text: "后端", link: "/backEnd/" }
    ]
  }
];

侧边栏配置

简单配置-自动生成侧栏

直接在 markdown 文件的头部加上

---
sidebar: auto
sidebarDepth: 2
---

• 默认情况下，侧边栏会自动地显示由当前页面的标题（headers）组成的链接，并按照页面本身的结构进行嵌套，你可以通过 themeConfig.sidebarDepth 来修改它的行为。默认的深度是 1，它将提取到 h2 的标题，设置成 0 将会禁用标题（headers）链接，同时，最大的深度为 2，它将同时提取 h2 和 h3 标题。
• 也可以使用 YAML front matter 来为某个页面重写此值：

使用 sidebar-config.js 进行多层嵌套配置

// 推荐使用这种方法来进行配置
module.exports = {
  "/frontEnd/": ["" /* /frontEnd/ */],

  "/backEnd/": ["" /* /backEnd/ */],

  // fallback
  "/": [""]
};

注意事项 1.使用这种多层嵌套配置，上一篇和下一篇文章的链接将会自动地根据当前页面的侧边栏的顺序来获取。并且需要按照当前的项目结构进行配置

2.确保 fallback 侧边栏被最后定义。VuePress 会按顺序遍历侧边栏配置来寻找匹配的配置。

更新 config.js 配置

const navConfig = require("./nav-config");
const sideBarConfig = require("./sidebar-config");

module.exports = {
  title: "Blog",
  description: "我的博客",
  themeConfig: {
    nav: navConfig,
    sidebar: sideBarConfig,
    sidebarDepth: 2
  }
};

修改默认主题

简单的 CSS 覆盖

在 override.styl 文件中进行覆盖，这是一个 Stylus 文件，但是仍然可以使用普通的 CSS 语法。

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色

修改页面类

在你想要修改的 .md 文件上加上

---
pageClass: custom-page-class
---

在 override.styl 文件中进行覆盖

.theme-container.custom-page-class{
  /* 特定页面的 CSS */
}

你可以通过 chrome 开发者工具 来查看对应的 css ，然后在 override.styl 自行进行修改

更多详情，请参考 VuePress 的文档

使用 vuepress-theme-reco

简单搭建完 Vuepress 后，会开始觉得单调，这时候可以根据 VuePress 的文档进行再开发。但是我个人只是想用作博客用，所以就简单用第三方插件，比如用 vuepress-theme-reco

直接按文档走教程就可以了，更多的可以再自己折腾一下。