# 默认的页面路由

此外，对于上述的目录结构，默认页面路由地址如下：

# 导航栏链接

你可以通过 themeConfig.nav 增加一些导航栏链接:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ]
  }
}

详细可以参考官方文档

# 侧边栏

想要使 侧边栏（Sidebar）生效，需要配置 themeConfig.sidebar，基本的配置，需要一个包含了多个链接的数组：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: [
      '/',
      '/page-a',
      ['/page-b', 'Explicit link text']
    ]
  }
}

你可以省略 .md 拓展名，同时以 / 结尾的路径将会被视为 */README.md，这个链接的文字将会被自动获取到（无论你是声明为页面的第一个 header，还是明确地在 YAML front matter 中指定页面的标题）。如果你想要显示地指定链接的文字，使用一个格式为 [link, text] 的数组。

# 侧边栏分组

你可以通过使用对象来将侧边栏划分成多个组：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'Group 1',   // 必要的
        path: '/foo/',      // 可选的, 应该是一个绝对路径
        collapsable: false, // 可选的, 默认值是 true,
        sidebarDepth: 1,    // 可选的, 默认值是 1
        children: [
          '/'
        ]
      },
      {
        title: 'Group 2',
        children: [ /* ... */ ]
      }
    ]
  }
}

侧边栏的每个子组默认是可折叠的，你可以设置 collapsable: false 来让一个组永远都是展开状态。

一个侧边栏的子组配置同时支持 sidebarDepth 字段用于重写默认显示的侧边栏深度(1)。

使用侧边栏分组可以让我们的文章结构和书籍的结构一样。可以访问我的博客查看。具有层级关系，按文件夹分类。

# 自动化生成侧边栏

目前 vuepress 侧边栏是通过配置来手动维护。如果层级和文章都多了，手动维护将会崩溃。

我有写过一个工具，用于替换博客图床以及生成 vuepress 侧边栏的小工具。

具体 GitHub 地址：https://github.com/woshilinqin/gitbook-tool

具体使用：修改路径为具体生成的目录即可

java -cp gitbook.jar com.util.VuePressUtil F:\hexo\vuepress\docs

# 最后更新时间

你可以通过 themeConfig.lastUpdated 选项来获取每个文件最后一次 git 提交的 UNIX 时间戳(ms)，同时它将以合适的日期格式显示在每一页的底部：

module.exports = {
  themeConfig: {
    lastUpdated: 'Last Updated', // string | boolean
  }
}

请注意，themeConfig.lastUpdated 默认是关闭的，如果给定一个字符串，它将会作为前缀显示（默认值是：Last Updated）。

使用须知

由于 lastUpdated 是基于 git 的, 所以你只能在一个基于 git 的项目中启用它。此外，由于使用的时间戳来自 git commit，因此它将仅在给定页的第一次提交之后显示，并且仅在该页面后续提交更改时更新。

git 项目是博客的根目录。

# 简单的 CSS 覆盖

如果你希望对默认主题的样式应用简单的覆盖，可以创建一个 .vuepress/override.styl 文件。 这是 Stylus 文件，但你也可以使用普通的 CSS 语法。新的1.0版本，使用 .vuepress/styles/palette.styl替换。

有几个颜色变量可以调整：

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