Home

# 设置vuepress布局

总起：vuepress是通过配置一些参数来帮你"干活"的,所以你将要学习一堆的vuepress配置参数

  1. 接下来我们在docs目录下创建一个.vuepress文件夹，记得vuepress前面有一个符号
  2. .vuepress目录下新建一个config.js文件，config.js将导出一个 JavaScript 对象(你知道config.js用来配置vuepress的参数就可以~)
  3. 创建一个public文件夹（用来放置静态资源，例如图片啥的...）
  4. 在docs目录下创建一个document文件夹，这个文件夹则用来存md文件（可以简单理解为页面~）

接下来看一下现在目录结构长什么样子，如下图所示：

一、在config.js里面配置如下的参数：

  module.exports = {
    title: 'VuePress',
    description: 'vuepress test',
    base: '/vuepress/', // 部署时候用到此参数
    markdown: {
      lineNumbers: true // 代码块是否显示序号
    },
    themeConfig: {
      // 使用locales可以实现语言国际化，本例子只有中文
      locales: {
        '/': {
          nav: [
            { text: 'Github', link: 'https://github.com/huangmingkun' },
            { text: 'vuepress官网', link: 'https://vuepress.vuejs.org/zh/'}
          ],
          sidebar: {
            '/':[
              {
                title: '文档介绍',   // 必要的
                path: '/',      // 可选的, 应该是一个绝对路径，默认指向docs下的README.md
                collapsable: false, // 是否展开子标题内容, 默认值是 true,
                sidebarDepth: 0,    // 是否开启子标题作为单独链接（0:不启用，1:启用一级标题，2:启用一级标题和二级标题）, 默认值是 1，多试一下就知道这个参数是什么效果了~
                children: [
                  {
                    collapsable: false,
                    sidebarDepth: 0,    // 可选的, 默认值是 1
                    children: [
                      ['document/install', '安装vuepress'], // md文件目录和标题名称
                      ['document/layout', 'vuepress布局'],
                      ['document/deploy', '部署'],
                    ]
                  }
                ]
              },
              {
                collapsable: false, // 可选的, 默认值是 true,
                title: 'TODO',
              }
            ]
          }
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

在nav设置的参数就是页面的导航栏，在sidebar设置的参数就是页面左侧栏

注意

修改config.js的参数后，要重新运行文档后才能生效！

提示

更多config.js配置参数，请参考vuepress官网配置

二、配置完config.js参数后，在对应文件夹创建对应的文件，例如sidebar-children中的document/install，就要在document下创建install.md文件（配置参数时候，md是自动省略的），并且在对应md文件输入相关的内容，再次运行vuepress即可看到如下的效果（图片插入方法）：

TIP

  • 接下来，如果要学习如何编写好看的文档，请移步到这里
  • 学习更多的功能请移步到vuepress官网

← 部署 →