导航配置

Hey，同学！想让用户轻松找到内容吗？这一篇教你配置 Docs 的导航系统～ 🗺️

🤔 导航包括什么？

Docs 的导航系统包含：

🏠 顶部导航

配置位置

在站点的 layout 或配置文件中：

// apps/docs/src/app/layout.tsx
const NAV_ITEMS = [
  { title: '快速开始', href: '/docs/quick-start' },
  { title: '指南', href: '/docs/guide' },
  { title: 'API', href: '/docs/api' },
];

功能

• 响应式设计
• 移动端折叠为汉堡菜单
• 支持外部链接

📖 侧边栏

自动生成

侧边栏根据当前分类的 _meta.json 自动生成：

content/
└── 指南/
    ├── _meta.json
    ├── 01-入门.mdx
    └── 02-进阶.mdx

侧边栏会显示：

• 01-入门
• 02-进阶

展开/折叠

支持展开/折叠子分类：

{
  "parent": {
    "title": "父分类",
    "items": {
      "child1": "子页面1",
      "child2": "子页面2"
    }
  }
}

🔍 搜索功能

工作原理

1. 用户输入关键词
2. 搜索索引匹配文档标题、内容
3. 返回匹配结果列表
4. 点击跳转到对应页面

配置搜索

在搜索组件中配置：

<SearchDialog
  placeholder="搜索文档..."
  resultsPath="/docs"
/>

索引更新

• 文档新增/修改时自动更新
• 部署时重新索引

🏷️ 标签云

展示位置

侧边栏底部可以展示标签云：

// 在侧边栏组件中
<TagCloud tags={allTags} baseUrl="/docs/tag" />

标签来源

从所有文档的 Frontmatter 提取 tags 字段。

📋 目录 (Table of Contents)

自动生成

根据文档中的标题（h2、h3）自动生成目录：

<TableOfContents
  headings={docHeadings}
  baseUrl={currentUrl}
/>

样式

• 右侧固定
• 滚动时高亮当前章节
• 点击跳转到对应位置

🎨 响应式设计

桌面端

• 顶部导航 + 左侧侧边栏 + 右侧目录

平板端

• 顶部导航 + 可折叠侧边栏

手机端

• 汉堡菜单（顶部导航折叠）
• 全屏搜索
• 隐藏侧边栏和目录

💡 最佳实践

1. 导航结构清晰

• 不要超过 2 级导航
• 常用功能放前面
• 重要页面加图标

2. 搜索优化

• 文档标题、描述要完整
• 关键词写在 Frontmatter 中
• 定期检查搜索结果质量

3. 目录合理

• 只显示 h2、h3 标题
• 避免太长（超过 20 项）
• 关键标题放前面

🔗 下一步

• SEO 优化 —— 优化导航带来的流量
• MDX 组件 —— 在文档中使用导航组件