添加导航和侧边栏

完善的导航系统能帮助用户快速找到所需内容。

导航栏配置

基础导航

// .vitepress/config.mts
export default defineConfig({
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '指南', link: '/guide/' },
      { text: 'API', link: '/api/' }
    ]
  }
})

下拉菜单

nav: [
  { text: '首页', link: '/' },
  {
    text: '学习',
    items: [
      { text: '指南', link: '/guide/' },
      { text: '教程', link: '/tutorial/' },
      { text: 'API', link: '/api/' }
    ]
  }
]

多级下拉

nav: [
  {
    text: '更多',
    items: [
      {
        text: '资源',
        items: [
          { text: '视频教程', link: '/videos' },
          { text: '案例展示', link: '/showcase' }
        ]
      },
      { text: '社区', link: '/community/' }
    ]
  }
]

带徽章的导航

nav: [
  { 
    text: '新功能', 
    link: '/new-features',
    badge: { text: '新', type: 'tip' }
  }
]

外部链接

nav: [
  { text: 'GitHub', link: 'https://github.com', target: '_blank' }
]

侧边栏配置

基础侧边栏

export default defineConfig({
  themeConfig: {
    sidebar: [
      {
        text: '开始',
        items: [
          { text: '介绍', link: '/guide/' },
          { text: '安装', link: '/guide/installation' }
        ]
      },
      {
        text: '基础',
        items: [
          { text: 'Markdown', link: '/basics/markdown' },
          { text: '配置', link: '/basics/config' }
        ]
      }
    ]
  }
})

多侧边栏

根据不同路径显示不同侧边栏：

sidebar: {
  '/guide/': [
    {
      text: '指南',
      items: [
        { text: '介绍', link: '/guide/' },
        { text: '安装', link: '/guide/installation' }
      ]
    }
  ],
  '/api/': [
    {
      text: 'API 参考',
      items: [
        { text: '配置', link: '/api/config' },
        { text: '运行时', link: '/api/runtime' }
      ]
    }
  ]
}

折叠分组

sidebar: [
  {
    text: '进阶',
    collapsed: true,  // 默认折叠
    items: [
      { text: '插件', link: '/advanced/plugins' },
      { text: '主题', link: '/advanced/themes' }
    ]
  }
]

嵌套侧边栏

sidebar: [
  {
    text: '教程',
    items: [
      {
        text: '入门',
        collapsed: true,
        items: [
          { text: '快速开始', link: '/tutorial/quick-start' },
          { text: '目录结构', link: '/tutorial/structure' }
        ]
      },
      {
        text: '进阶',
        collapsed: true,
        items: [
          { text: '自定义主题', link: '/tutorial/custom-theme' },
          { text: '插件开发', link: '/tutorial/plugin-dev' }
        ]
      }
    ]
  }
]

带徽章的侧边栏

sidebar: [
  {
    text: '指南',
    items: [
      { 
        text: '新功能', 
        link: '/guide/new',
        badge: { text: '新', type: 'tip' }
      }
    ]
  }
]

社交链接

export default defineConfig({
  themeConfig: {
    socialLinks: [
      { icon: 'github', link: 'https://github.com/...' },
      { icon: 'twitter', link: 'https://twitter.com/...' },
      { icon: 'discord', link: 'https://discord.gg/...' }
    ]
  }
})

完整示例

// .vitepress/config.mts
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: '我的文档',
  description: 'VitePress 站点',
  
  themeConfig: {
    // Logo
    logo: '/logo.svg',
    
    // 站点标题
    siteTitle: '我的文档',
    
    // 导航栏
    nav: [
      { text: '首页', link: '/' },
      {
        text: '指南',
        activeMatch: '/guide/',
        items: [
          { text: '介绍', link: '/guide/' },
          { text: '快速开始', link: '/guide/quick-start' },
          { text: '安装', link: '/guide/installation' }
        ]
      },
      { 
        text: 'API', 
        link: '/api/',
        badge: { text: '完整', type: 'tip' }
      },
      { text: 'GitHub', link: 'https://github.com', target: '_blank' }
    ],
    
    // 侧边栏
    sidebar: {
      '/guide/': [
        {
          text: '开始',
          items: [
            { text: '介绍', link: '/guide/' },
            { text: '快速开始', link: '/guide/quick-start' }
          ]
        },
        {
          text: '基础',
          collapsed: false,
          items: [
            { text: 'Markdown', link: '/guide/markdown' },
            { text: '配置', link: '/guide/configuration' }
          ]
        },
        {
          text: '进阶',
          collapsed: true,
          items: [
            { text: '主题', link: '/guide/themes' },
            { text: '插件', link: '/guide/plugins' }
          ]
        }
      ],
      '/api/': [
        {
          text: 'API 参考',
          items: [
            { text: '配置 API', link: '/api/config' },
            { text: '运行时 API', link: '/api/runtime' }
          ]
        }
      ]
    },
    
    // 社交链接
    socialLinks: [
      { icon: 'github', link: 'https://github.com/...' }
    ]
  }
})

学习检查清单

• [ ] 配置了导航栏
• [ ] 添加了下拉菜单
• [ ] 配置了侧边栏
• [ ] 实现了多侧边栏
• [ ] 添加了社交链接

下一步

继续学习 部署到线上，发布你的站点。