导航栏配置

导航栏是网站顶部的主菜单，用于站点导航和品牌展示。

基础配置

export default defineConfig({
  themeConfig: {
    // Logo 图片
    logo: '/logo.svg',
    
    // 站点标题
    siteTitle: '我的站点',
    
    // 导航菜单
    nav: [
      { text: '首页', link: '/' },
      { text: '指南', link: '/guide/' },
      { text: 'API', link: '/api/' }
    ]
  }
})

导航项配置

基础链接

nav: [
  { text: '首页', link: '/' },
  { text: '指南', link: '/guide/' }
]

下拉菜单

nav: [
  {
    text: '参考',
    items: [
      { text: '配置', link: '/reference/config' },
      { text: 'API', link: '/reference/api' }
    ]
  }
]

嵌套菜单

nav: [
  {
    text: '参考',
    items: [
      {
        text: '配置',
        items: [
          { text: '站点配置', link: '/config/site' },
          { text: '主题配置', link: '/config/theme' }
        ]
      }
    ]
  }
]

高级配置

自定义链接属性

nav: [
  {
    text: '外部链接',
    link: 'https://github.com',
    target: '_blank',      // 在新标签页打开
    rel: 'noopener'        // 安全属性
  }
]

活动状态匹配

nav: [
  {
    text: '指南',
    link: '/guide/',
    activeMatch: '/guide/'  // 匹配所有 /guide/ 开头的路径
  }
]

完整配置项

interface NavItem {
  text: string              // 显示文字
  link?: string             // 链接地址
  items?: NavItem[]         // 子菜单
  activeMatch?: string      // 活动状态匹配
  target?: string           // 链接目标
  rel?: string              // 链接关系
}

Logo 配置

图片 Logo

export default defineConfig({
  themeConfig: {
    logo: '/logo.svg'
  }
})

Logo 文件放在 docs/public/ 目录下。

暗/亮模式不同 Logo

export default defineConfig({
  themeConfig: {
    logo: {
      light: '/logo-light.svg',
      dark: '/logo-dark.svg'
    }
  }
})

隐藏 Logo 文字

export default defineConfig({
  themeConfig: {
    logo: '/logo.svg',
    siteTitle: false  // 隐藏标题文字
  }
})

社交链接

在导航栏右侧显示社交图标：

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

自定义图标

socialLinks: [
  {
    icon: {
      svg: '<svg viewBox="0 0 24 24">...</svg>'
    },
    link: 'https://example.com'
  }
]

搜索框

本地搜索

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local'
    }
  }
})

Algolia 搜索

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'algolia',
      options: {
        appId: 'YOUR_APP_ID',
        apiKey: 'YOUR_API_KEY',
        indexName: 'YOUR_INDEX_NAME'
      }
    }
  }
})

完整示例

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    // Logo
    logo: {
      light: '/logo-light.svg',
      dark: '/logo-dark.svg'
    },
    
    // 站点标题
    siteTitle: 'VitePress 学习指南',
    
    // 导航菜单
    nav: [
      { text: '首页', link: '/' },
      {
        text: '入门指南',
        link: '/guide/',
        activeMatch: '/guide/'
      },
      {
        text: '基础功能',
        items: [
          { text: 'Markdown', link: '/basics/markdown' },
          { text: '配置', link: '/basics/configuration' },
          { text: '导航栏', link: '/basics/navbar' },
          { text: '侧边栏', link: '/basics/sidebar' }
        ]
      },
      {
        text: '主题',
        items: [
          {
            text: '定制',
            items: [
              { text: '默认主题', link: '/theme/default-theme' },
              { text: '自定义主题', link: '/theme/custom-theme' }
            ]
          }
        ]
      },
      {
        text: 'GitHub',
        link: 'https://github.com/vuejs/vitepress',
        target: '_blank'
      }
    ],
    
    // 社交链接
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      { icon: 'twitter', link: 'https://twitter.com/vuejs' }
    ],
    
    // 搜索
    search: {
      provider: 'local'
    }
  }
})

下一步

接下来学习 侧边栏配置 来组织文档结构。