# vuepress快速上手（二）｜青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 13 天

默认主题配置

导航栏

网页右上角部分的导航栏，试试就知道了

导航栏链接

你可以通过 themeConfig.nav 将链接添加到导航栏中：

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

如果你提供一个 items 而不是 link 的数组，这些链接也可以是下拉菜单：

module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Languages',
        items: [
          { text: 'Chinese', link: '/language/chinese' },
          { text: 'Japanese', link: '/language/japanese' }
        ]
      }
    ]
  }
}

同时上述方式是可以嵌套的

禁用导航栏

可以使用 themeConfig.navbar，来禁用某个特定页面的导航栏：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    navbar: false
  }
}

侧边栏

侧边栏的使用

要启用侧边栏, 请使用 themeConfig.sidebar。基本的配置需要一个链接数组：

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

可以省略 .md 扩展名，以 / 结尾的路径被推断为 */README.md 。该链接的文本是自动推断的（从页面的第一个标题或 YAML front matter 中的显式标题）。如果希望明确指定链接文本，请使用 [link,text] 形式的数组，如['/page-b', 'Explicit link text']。

嵌套标题链接

侧边栏自动显示当前激活页面中标题的链接，嵌套在页面本身的链接下。可以使用 themeConfig.sidebarDepth 自定义此行为。默认深度是 1，它提取 h2 标题。将其设置为 0 将禁用标题链接，最大值为2，同时提取 h2 和 h3 标题。

页面也可以在使用 YAML front matter 时覆盖此值：

---
sidebarDepth: 2
---

侧边栏分组

可以使用对象将侧边栏链接分成多个分组：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'Group 1',
        collapsable: false,
        children: [
          '/'
        ]
      },
      {
        title: 'Group 2',
        children: [ /* ... */ ]
      }
    ]
  }
}

侧边栏分组默认情况下是可折叠的，可以强制一个分组始终以 collapsable：false 打开。

多个侧边栏

如果希望为不同的内容部分显示不同的侧边栏，要求目录如下:

.
├─ README.md
├─ a.md
├─ b.md
├─ c
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ d
   ├─ README.md
   ├─ three.md
   └─ four.md

然后，修改你的配置，将每个页面定义到不同的侧边栏中。

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: {
      '/c/': [
        '',     /* /c/ */
        'one',  /* /c/one.html */
        'two'   /* /c/two.html */
      ],

      '/d/': [
        '',      /* /d/ */
        'three', /* /d/three.html */
        'four'   /* /d/four.html */
      ],

      // 回退(fallback)侧边栏配置
      '/': [
        '',    /* / */
        'a',   /* /a.html */
        'b'    /* /b.html */
      ]
    }
  }
}

请确保将回退(fallback)侧边栏，定义在配置的最后。同时文件夹的目录一定要在最后加/，否则路径会出错

搜索框

内置搜索

可以通过 themeConfig.search: false 禁用内置搜索框，以及通过 themeConfig.searchMaxSuggestions 来调整搜索框显示的搜索提示数量：

module.exports = {
  themeConfig: {
    search: false,
    searchMaxSuggestions: 5
  }
}

内置搜索只能从标题 h2 和 h3 标题构建索引

Algolia Search

要全文搜索可以使用 Algolia 搜索。Algolia搜索需要你在使用之前将你的网站提交给它们用于创建索引。更多信息，请参考 Algolia DocSearch 文档。

vuepress快速上手（二） ｜ 青训营笔记

# vuepress快速上手（二） ｜ 青训营笔记