vuepress2.0使用教程（3）- vuepress2.0使用（搭建一个vuepress支撑的网站）-修改默认模板配置

vuepress2.0使用（搭建一个vuepress支撑的网站）-修改默认模板配置

百家饭OpenAPI

2830人浏览 · 2022-07-31 17:00:00

百家饭OpenAPI · 2022-07-31 17:00:00 发布

百家饭团队开发的百家饭OpenAPI平台是用vuepress2.0搭建的，搭建的时候不知道2.0还处在beta状态，所以导致后来踩了一些坑，使用过程中vuepress2.0也从2.0.0-beta.18升到了2.0.0-beta.48，有很多的变化，所以想写一个教程介绍一下vuepress2.0的情况以及使用经验。

大致计划写这些内容吧：

这里先给搜索进来的同学提个醒：凡是网上搜索到需要修改clientAppEnhance.js 文件的教程都已经过时，最新版本已不再使用。另外说个题外话，我查了下，我为数不多的搜索关键词里面，vuepress的占了大部分，这里感谢大家的关注，这个教程肯定有不合理的地方，如果有任何需要帮助的，大家都可以留言，我尽力解答。

这一篇接上一篇，我们这周的主要目的是让大家能够利用默认模板进行初步的搭建工作，上一篇我们完成了一个初步模板的搭建，现在的页面右侧是主要内容，左侧是一个菜单，我们可以尝试在docs里面创建多个目录，目录下添加md文件，发现左侧菜单并不是所有文档的动态扩展的菜单，只是当前文档的内容分级菜单。

这一篇我们通过尝试让左侧改成一个全站内容菜单来讲一下默认主题的使用。

配置默认模板

为了让左侧丰富起来，这里要引入模板的概念了，在这之前，其实几个步骤里，我们都没有提到模板，包括页面为什么上面会有工具栏，为什么左侧是一个菜单，这些内容实际是通过default-theme来实现的，这个模板是vuepress的默认模板，如果你没有进行修改和配置，那会默认引用这个模板。

那这个模板要怎么能配置更多的内容呢？

如果这时你用编辑器已经打开了我们创建的工程，这时大概的目录结构应该是这样的：

如果你执行了初始化步骤，根目录下还会有个.vuepress目录，在你把文档都迁移到子目录后，那个就可以去掉了。

这个doc里的.vuepress是在上面的步骤中，自动生成的，现在他包含了两个目录的内容，一个是.cache,一个是.temp，这两个都是vuepress将md文件自动渲染成html的过程文档，可以不用管（顺便说一句，以后如果遇到内容不更新的情况，删除这两个目录有时候会有效果）

如果我们要配置模板和进行更多的配置，在这个.vuepress里要增加一个文件叫config.js,内容如下：

const { defaultTheme } = require('vuepress')

module.exports = {
  theme: defaultTheme({
    // 默认主题配置
    navbar: [
    ],
    sidebar: [
    ],
  }),
}

官方的默认主题文档只说了你需要在你的配置文件中通过 theme 配置项来使用它，稍微有点让人搞不清楚配置文件是什么，其实就是说的这个.vuepress目录下的config.js文件。

请注意，首次添加config.js文件需要重启测试服务才能被刷新

上面的配置和官网的配置样例稍有区别，为了突出这一章我们要讲的两个重要配置点，我把他们一起放了进去。

配置顶部菜单

顶部菜单通过上述配置中的navbar进行配置，例如我们要增加一个返回首页的菜单项，内容如下：

const { defaultTheme } = require('vuepress')

module.exports = {
  theme: defaultTheme({
    // 默认主题配置
    navbar: [
      {
        text: '首页',
        link: '/',
      },
    ],
  }),
}

效果如下：

配置侧边栏

侧边栏配置是通过sidebar配置项配置的，这个配置项有几种内容格式：

false: 不显示

‘auto’：根据文本里的标题内容自动显示（默认格式，上面的样式就是这个）

数组：要显示的数组内容

例如我们要在旁边显示两个按钮，一个是经验分享，一个是使用教程，分别指向经验分享目录中的first.md和使用教程目录中的first.md，则内容如下：

const { defaultTheme } = require('vuepress')

module.exports = {
  theme: defaultTheme({
    // 默认主题配置
    navbar: [
      {
        text: '首页',
        link: '/',
      },
    ],
    sidebar:[
        // SidebarItem
        {
          text: '使用教程',
          link: '/使用教程/',
          children: [
            // SidebarItem
            {
              text: '第一篇',
              link: '/使用教程/first.md',
            //   children: [],
            },
            // 字符串 - 页面文件路径
            // '/foo/bar.md',
          ],
        },
        // 字符串 - 页面文件路径
        '/经验分享/first.md',
      ],
  }),
}

这里用到了两种格式，一个是直接放url字符串，一个是SidebarItem对象，对象可以定义text（显示文本）、link（链接地址），children（子目录）三个属性，用于定义多级菜单。测试了一下children的级别似乎是无限的，只是显示上会有个偏移量，效果如下：

上面的效果图也可以看出来，如果是直接放url地址的，标题是对应md文件的标题。

好，这周我们讲到这里，初步就可以通过md文件的书写和右侧和顶部菜单的使用搭建一个博客网站了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^