124 lines
3.7 KiB
Markdown
124 lines
3.7 KiB
Markdown
---
|
|
title: Sidebar Configuration
|
|
createTime: 2025/10/09 21:05:36
|
|
permalink: /en/config/sidebar/
|
|
---
|
|
|
|
## Overview
|
|
|
|
The sidebar is a core navigation area located on the left side of the page in the theme,
|
|
serving the important function of guiding users to jump between different pages.
|
|
|
|
In the VuePress ecosystem, the default theme `@vuepress/theme-default` manages the sidebar through
|
|
the `sidebar` configuration option. While retaining this classic configuration method,
|
|
this theme also provides a more flexible collection-level sidebar configuration solution.
|
|
|
|
## Collection-Level Sidebar Configuration
|
|
|
|
Collections are the core concept for organizing series of documents in the theme.
|
|
When a collection type is set to `doc`, you can define a dedicated sidebar navigation within `collection.sidebar`.
|
|
|
|
The following example demonstrates how to create a collection of type `doc` under the `docs` directory and configure its sidebar:
|
|
|
|
::: code-tabs#configs
|
|
|
|
@tab .vuepress/config.ts
|
|
|
|
```ts twoslash
|
|
import { defineUserConfig } from 'vuepress'
|
|
import { defineCollection, plumeTheme } from 'vuepress-theme-plume'
|
|
|
|
// Define document collection configuration // [!code hl:10]
|
|
const demo = defineCollection({
|
|
type: 'doc',
|
|
dir: 'demo', // Document directory
|
|
title: 'Demo', // Collection name
|
|
sidebar: [ // Sidebar configuration // [!code ++:4]
|
|
{ text: 'one item', link: 'one' },
|
|
{ text: 'two item', link: 'two' },
|
|
]
|
|
})
|
|
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
collections: [demo], // Register collection // [!code hl]
|
|
})
|
|
})
|
|
```
|
|
|
|
@tab .vuepress/plume.config.ts
|
|
|
|
```ts twoslash
|
|
import { defineCollection, defineThemeConfig } from 'vuepress-theme-plume'
|
|
|
|
// Define collection using independent config file // [!code hl:10]
|
|
const demo = defineCollection({
|
|
type: 'doc',
|
|
dir: 'demo',
|
|
title: 'Demo',
|
|
sidebar: [
|
|
{ text: 'one item', link: 'one' },
|
|
{ text: 'two item', link: 'two' },
|
|
]
|
|
})
|
|
|
|
export default defineThemeConfig({
|
|
collections: [demo], // [!code hl]
|
|
})
|
|
```
|
|
|
|
:::
|
|
|
|
The `defineCollection` utility function provided by the theme simplifies the collection configuration
|
|
process. For complete collection configuration options, please refer to the [Collections Configuration Documentation](./collections.md).
|
|
|
|
## Global Sidebar Configuration
|
|
|
|
If you prefer to manage the sidebar using the traditional global configuration approach,
|
|
you can directly use the `sidebar` option in the theme configuration.
|
|
This method is suitable for scenarios that do not require navigation grouping by collections.
|
|
|
|
::: code-tabs#configs
|
|
|
|
@tab .vuepress/config.ts
|
|
|
|
```ts twoslash
|
|
import { defineUserConfig } from 'vuepress'
|
|
import { plumeTheme } from 'vuepress-theme-plume'
|
|
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
// Global sidebar configuration // [!code hl:7]
|
|
sidebar: {
|
|
'/config/': [ // Matches /config/ path
|
|
{ text: 'Sidebar Configuration', link: 'sidebar-1' },
|
|
{ text: 'Sidebar Configuration', link: 'sidebar-2' },
|
|
]
|
|
}
|
|
})
|
|
})
|
|
```
|
|
|
|
@tab .vuepress/plume.config.ts
|
|
|
|
```ts twoslash
|
|
import { defineThemeConfig } from 'vuepress-theme-plume'
|
|
|
|
export default defineThemeConfig({
|
|
// Define global sidebar in independent config file // [!code hl:7]
|
|
sidebar: {
|
|
'/config/': [
|
|
{ text: 'Sidebar Configuration', link: 'sidebar-1' },
|
|
{ text: 'Sidebar Configuration', link: 'sidebar-2' },
|
|
]
|
|
}
|
|
})
|
|
```
|
|
|
|
:::
|
|
|
|
Both configuration methods have their advantages: collection-level configuration is suitable for
|
|
modular document structures, while global configuration is convenient for unified navigation management in simple projects.
|
|
|
|
For complete sidebar configuration options and usage tips, please refer to the [Sidebar Configuration Guide](../guide/quick-start/sidebar.md).
|