docs: add more docs

pull/687/head
Kia King Ishii 2 years ago
parent de765296ef
commit 31a725d067

@ -78,6 +78,7 @@ function sidebarGuide() {
items: [
{ text: 'Introduction', link: '/guide/theme-introduction' },
{ text: 'Nav', link: '/guide/theme-nav' },
{ text: 'Sidebar', link: '/guide/theme-sidebar' },
{ text: 'Layout', link: '/guide/theme-layout' },
{ text: 'Homepage', link: '/guide/theme-homepage' },
{ text: 'Footer', link: '/guide/theme-footer' },

@ -64,7 +64,7 @@ Set `false` to disable the feature. If the option is `undefined`, then the value
```ts
export default {
title: 'VitePress',
titleTemplate: 'Vite & Vue powered static site generator.'
titleTemplate: 'Vite & Vue powered static site generator'
}
```

@ -47,6 +47,123 @@ export default {
}
```
## nav
- Type: `NavItem`
The configuration for the nav menu item. You may learn more details at [Theme: Nav](../guide/theme-nav#navigation-links).
```js
export default {
themeConfig: {
nav: [
{ text: 'Guide', link: '/guide' },
{
text: 'Dropdown Menu',
items: [
{ text: 'Item A', link: '/item-1' },
{ text: 'Item B', link: '/item-2' },
{ text: 'Item C', link: '/item-3' }
]
}
]
}
}
```
```ts
type NavItem = NavItemWithLink | NavItemWithChildren
type NavItemWithLink = {
text: string
link: string
activeMatch?: string
}
interface NavItemWithChildren {
text?: string
items: NavItemWithLink[]
}
```
## sidebar
- Type: `Sidebar`
The configuration for the sidebar menu item. You may learn more details at [Theme: Nav](../guide/theme-sidebar).
```js
export default {
themeConfig: {
sidebar: [
{
text: 'Guide',
items: [
{ text: 'Introduction', link: '/introduction' },
{ text: 'Getting Started', link: '/getting-started' },
...
]
}
]
}
}
```
```ts
type Sidebar = SidebarGroup[] | SidebarMulti
interface SidebarMulti {
[path: string]: SidebarGroup[]
}
interface SidebarGroup {
text: string
items: SidebarItem[]
collapsible?: boolean
collapsed?: boolean
}
interface SidebarItem {
text: string
link: string
}
```
## socialLinks
- Type: `SocialLink`
You may define this option to show your social account links with icons in nav.
```js
export default {
themeConfig: {
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
{ icon: 'twitter', link: '...' },
{ icon: 'discord', link: '...' }
]
}
}
```
```ts
interface SocialLink {
icon: SocialLinkIcon
link: string
}
type SocialLinkIcon =
| 'discord'
| 'facebook'
| 'github'
| 'instagram'
| 'linkedin'
| 'slack'
| 'twitter'
| 'youtube'
```
## footer
- Type: `Footer`

@ -3,6 +3,7 @@
VitePress comes with its default theme providing many features out of the box. Learn more about each feature on its dedicated page listed below.
- [Nav](./theme-nav)
- [Sidebar](./theme-sidebar)
- [Layout](./theme-layout)
- [Homepage](./theme-homepage)
- [Footer](./theme-footer)

@ -0,0 +1,159 @@
# Sidebar
The sidebar is the main navigation block for your documentation. You can configure the sidebar menu in `themeConfig.sidebar`.
```js
export default {
themeConfig: {
sidebar: [
{
text: 'Guide',
items: [
{ text: 'Introduction', link: '/introduction' },
{ text: 'Getting Started', link: '/getting-started' },
...
]
}
]
}
}
```
## The Basics
The simplest form of the sidebar menu is passing in a single array of links. The first level item defines the "section" for the sidebar. It should contain `text`, which is the title of the section, and `items` which are the actual navigation links.
```js
export default {
themeConfig: {
sidebar: [
{
text: 'Section Title A',
items: [
{ text: 'Item A', link: '/item-a' },
{ text: 'Item B', link: '/item-b' },
...
]
},
{
text: 'Section Title B',
items: [
{ text: 'Item C', link: '/item-c' },
{ text: 'Item D', link: '/item-d' },
...
]
}
]
}
}
```
Each `link` should specify the path to the actual file starting with `/`. If you add trailing slash to the end of link, it will show `index.md` of the corresponding directory.
```js
export default {
themeConfig: {
sidebar: [
{
text: 'Guide',
items: [
// This shows `/guide/index.md` page.
{ text: 'Introduction', link: '/guide/' }
]
}
]
}
}
```
## Multiple Sidebars
You may show different sidebar depending on the page path. For example, as shown on this site, you might want to create a separate sections of content in your documentation like "Guide" page and `Config` page.
To do so, first organize your pages into directories for each desired section:
```
.
├─ guide/
│ ├─ index.md
│ ├─ one.md
│ └─ two.md
└─ config/
├─ index.md
├─ three.md
└─ four.md
```
Then, update your configuration to define your sidebar for each section. This time, you should pass an object instead of an array.
```js
export default {
themeConfig: {
sidebar: {
// This sidebar gets displayed when user is
// under `guide` directory.
'/guide/': {
text: 'Guide',
items: [
// This shows `/guide/index.md` page.
{ text: 'Index', link: '/guide/' }, // /guide/index.md
{ text: 'One', link: '/guide/one' }, // /guide/one.md
{ text: 'Two', link: '/guide/two' } // /guide/two.md
]
},
// This sidebar gets displayed when user is
// under `config` directory.
'/config/': {
text: 'Config',
items: [
// This shows `/guide/index.md` page.
{ text: 'Index', link: '/config/' }, // /config/index.mdasdfasdfasdfasdfaf
{ text: 'Three', link: '/config/three' }, // /config/three.md
{ text: 'Four', link: '/config/four' } // /config/four.md
]
}
}
}
}
```
## Collapsible Sidebar Groups
By adding `collapsible` option to the sidebar group, it shows a toggle button to hide/show each section.
```js
export default {
themeConfig: {
sidebar: [
{
text: 'Section Title A',
collapsible: true,
items: [...]
},
{
text: 'Section Title B',
collapsible: true,
items: [...]
}
]
}
}
```
All sections are "open" by default. If you would like them to be "closed" on intial page load, set `collapsed` option to `true`.
```js
export default {
themeConfig: {
sidebar: [
{
text: 'Section Title A',
collapsible: true,
collapsed: true,
items: [...]
}
]
}
}
```
Loading…
Cancel
Save