本文档介绍了 shadcn/ui 文档网站中使用的导航配置系统。它涵盖了导航菜单的结构、配置和组织方式,以使用户能够直观地访问文档内容。
有关更广泛的文档网站架构的信息,请参阅 文档网站。有关 MDX 内容处理的详细信息,请参阅 MDX 处理。
导航系统围绕一个中央配置构建,该配置定义了三个不同的导航区域:主导航、侧边栏导航和图表特定导航。
来源: apps/www/config/docs.ts1-537
导航配置在 DocsConfig 接口中定义,并在 docsConfig 对象中实现。这种集中式方法确保了整个文档网站导航结构的统一性。
来源: apps/www/config/docs.ts3-7
主导航显示在顶部导航栏中,提供对文档网站主要部分的访问。它包含七个主要项目,涵盖核心功能领域。
| 导航项 | 路由 | 目的 |
|---|---|---|
| 主页 | / | 着陆页 |
| 文档 | /docs | 主文档入口 |
| 组件 | /docs/components/accordion | 组件库展示 |
| 区块 | /blocks | 预构建组件块 |
| 图表 | /charts | 图表组件文档 |
| 主题 | /themes | 主题配置和示例 |
| 颜色 | /colors | 颜色系统文档 |
主导航被配置为扁平数组结构,没有嵌套项,提供对顶级部分的直接访问。
来源: apps/www/config/docs.ts10-39
侧边栏导航提供对详细文档内容的层级访问。它被组织成主要部分,并为特定主题和组件设置了嵌套项。
入门部分为新用户提供基础信息
来源: apps/www/config/docs.ts41-116
安装部分提供特定于框架的设置指南
| 框架 | 路由 | 描述 |
|---|---|---|
| Next.js | /docs/installation/next | Next.js 集成指南 |
| Vite | /docs/installation/vite | Vite 项目设置 |
| Laravel | /docs/installation/laravel | Laravel with Inertia 设置 |
| React Router | /docs/installation/react-router | React Router 集成 |
| Remix | /docs/installation/remix | Remix 框架设置 |
| Astro | /docs/installation/astro | Astro 框架集成 |
| TanStack Start | /docs/installation/tanstack | TanStack Start 设置 |
| TanStack Router | /docs/installation/tanstack-router | TanStack Router 集成 |
| 手动 | /docs/installation/manual | 手动安装过程 |
来源: apps/www/config/docs.ts118-166
组件部分包含完整的组件库文档,按字母顺序排列。每个组件都有自己的专用文档页面,包含示例、API 参考和使用指南。
组件范围从基本的 UI 元素,如 Accordion 和 Button,到复杂的组件,如 Data Table 和 Navigation Menu。每个组件条目都遵循 /docs/components/{component-name} 的模式。
来源: apps/www/config/docs.ts168-421
注册表部分标记为“新”,并提供有关创建和管理自定义组件注册表的文档
| 主题 | 路由 | 目的 |
|---|---|---|
| 介绍 | /docs/registry | 注册表系统概述 |
| 快速入门 | /docs/registry/getting-started | 设置和基本用法 |
| 示例 | /docs/registry/examples | 注册表示例 |
| 在 v0 中打开 | /docs/registry/open-in-v0 | v0 集成 |
| 常见问题 | /docs/registry/faq | 常见问题解答 |
| registry.json | /docs/registry/registry-json | 注册表配置架构 |
| registry-item.json | /docs/registry/registry-item-json | 单个条目架构 |
来源: apps/www/config/docs.ts422-462
图表导航提供图表组件系统的专用文档,分为三个主要部分
基础图表文档,包括安装和主题设置
单个图表组件文档
| 图表类型 | 路由 | 描述 |
|---|---|---|
| 面积图 | /docs/charts/area | 面积图实现 |
| 条形图 | /docs/charts/bar | 条形图组件 |
| 折线图 | /docs/charts/line | 折线图可视化 |
| 饼图 | /docs/charts/pie | 饼图组件 |
| 雷达图 | /docs/charts/radar | 雷达图实现 |
| 径向图 | /docs/charts/radial | 径向图组件 |
可重用的图表相关组件
| 组件 | 路由 | 目的 |
|---|---|---|
| 工具提示 | /docs/charts/tooltip | 图表工具提示组件 |
| 图例 | /docs/charts/legend | 图表图例组件 |
来源: apps/www/config/docs.ts464-535
导航项支持多个属性以增强功能
label 属性用于突出显示新功能或特殊功能,如标记为“新”的“Tailwind v4”和“注册表”部分所示。