51 lines
1.4 KiB
Plaintext
51 lines
1.4 KiB
Plaintext
---
|
||
title: 概览
|
||
description: Fumadocs UI 的概览
|
||
---
|
||
|
||
## 架构
|
||
|
||
### 页面树
|
||
|
||
侧边栏等导航元素使用[页面树](/docs/headless/page-tree)来渲染导航链接，它是描述所有可用页面和文件夹的树形结构。
|
||
|
||
通常，它是使用 [`loader()`](/docs/headless/source-api) 从您的文件结构生成的，您可以了解[如何组织页面](/docs/page-conventions)。
|
||
|
||
## 自定义
|
||
|
||
### 布局
|
||
|
||
您可以使用不同布局的暴露选项：
|
||
|
||
<Cards>
|
||
<Card title="文档布局" href="/docs/layouts/docs">
|
||
文档的布局
|
||
</Card>
|
||
<Card title="文档页面" href="/docs/layouts/page">
|
||
文档内容的布局
|
||
</Card>
|
||
<Card title="笔记本布局" href="/docs/layouts/notebook">
|
||
文档布局的更紧凑版本
|
||
</Card>
|
||
<Card title="主页布局" href="/docs/layouts/home-layout">
|
||
其他页面的布局
|
||
</Card>
|
||
</Cards>
|
||
|
||
### 组件
|
||
|
||
Fumadocs UI 还提供了样式化组件，用于交互式示例以增强您的文档，您可以使用暴露的道具如 `style` 和 `className` 来自定义它们。
|
||
|
||
参见[组件](/docs/components)。
|
||
|
||
### 设计系统
|
||
|
||
由于设计系统是基于 Tailwind CSS 构建的，您可以[通过 CSS 变量](/docs/theme#colors)自定义它。
|
||
|
||
### CLI
|
||
|
||
如果这些都不适合您，Fumadocs CLI 是一个工具，可以将 Fumadocs UI 组件和布局安装到您的代码库中，类似于 Shadcn UI。允许您完全自定义 Fumadocs UI：
|
||
|
||
```package-install
|
||
npx fumadocs add
|
||
``` |