VuePress : Custom Contents in Sidebar for Exery Single Page

sidebar

• Type: false | 'auto' | SidebarConfigArray | SidebarConfigObject

• Default: 'auto'

• Details:

  Configuration of sidebar.

  You can override this global option via sidebar frontmatter in your pages.

  Set to false to disable sidebar.

  If you set it to 'auto', the sidebar will be automatically generated from the page headers.

  To configure the sidebar items manually, you can set this option to a sidebar array, each item of which could be a SidebarItem object or a string:

  • A SidebarItem object should have a text field, could have an optional link field and an optional children field. The children field should be a sidebar array.
  • A string should be the path to the target page file. It will be converted to a SidebarItem object, whose text is the page title, link is the page route path, and children is automatically generated from the page headers.

  If you want to set different sidebar for different sub paths, you can set this option to a sidebar object:

  • The key should be the path prefix.
  • The value should be a sidebar array.

• In order to add custom links external as well as internal see this:

module.exports = {
  themeConfig: {
    // sidebar object
    // pages under different sub paths will use different sidebar
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          children: ['/guide/README.md', '/guide/getting-started.md'],
        },
      ],
      '/reference/': [
        {
          text: 'Reference',
          children: ['/reference/cli.md', '/reference/config.md'],
        },
      ],
    },
  },
}

For more info see Sidebar Config