160 lines
3.6 KiB
Plaintext
160 lines
3.6 KiB
Plaintext
---
|
||
title: 文档布局
|
||
description: 文档的布局
|
||
---
|
||
|
||
文档页面的布局，它包括一个侧边栏和仅限移动设备的导航栏。
|
||
|
||
> 它是一个服务器组件，您不应该在客户端组件中引用它。
|
||
|
||
## 使用方法
|
||
|
||
将您的页面树传递给组件。
|
||
|
||
```tsx title="layout.tsx"
|
||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||
import { baseOptions } from '@/app/layout.config';
|
||
import type { ReactNode } from 'react';
|
||
|
||
export default function Layout({ children }: { children: ReactNode }) {
|
||
return (
|
||
<DocsLayout {...baseOptions} tree={tree}>
|
||
{children}
|
||
</DocsLayout>
|
||
);
|
||
}
|
||
```
|
||
|
||
{/* <AutoTypeTable
|
||
path="./content/docs/props.ts"
|
||
type="Omit<DocsLayoutProps, 'children' | 'disableThemeSwitch'>"
|
||
/> */}
|
||
|
||
## 侧边栏
|
||
|
||
```tsx title="layout.tsx"
|
||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||
|
||
<DocsLayout
|
||
sidebar={{
|
||
// sidebar options:
|
||
enabled: true,
|
||
}}
|
||
/>;
|
||
```
|
||
|
||
{/* <AutoTypeTable path="./content/docs/props.ts" name="SidebarProps" /> */}
|
||
|
||
### 侧边栏标签
|
||
|
||
有关用法，请参见[导航指南](/docs/navigation/sidebar#sidebar-tabs)。
|
||
|
||
#### 装饰
|
||
|
||
更改标签的图标/样式。
|
||
|
||
```tsx
|
||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||
|
||
<DocsLayout
|
||
sidebar={{
|
||
tabs: {
|
||
transform: (option, node) => ({
|
||
...option,
|
||
icon: 'my icon',
|
||
}),
|
||
},
|
||
}}
|
||
/>;
|
||
```
|
||
|
||
## 导航栏
|
||
|
||
一个仅限移动设备的导航栏，我们建议从 `baseOptions` 自定义它。
|
||
|
||
```tsx
|
||
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
|
||
|
||
export const baseOptions: BaseLayoutProps = {
|
||
githubUrl: 'https://github.com/fuma-nama/fumadocs',
|
||
nav: {
|
||
title: 'My App',
|
||
},
|
||
};
|
||
```
|
||
|
||
{/* <AutoTypeTable
|
||
path="./content/docs/props.ts"
|
||
type="Omit<NavbarProps, 'children'>"
|
||
/> */}
|
||
|
||
### 透明模式
|
||
|
||
要使导航栏背景透明，您可以配置透明模式。
|
||
|
||
```tsx
|
||
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
|
||
|
||
export const baseOptions: BaseLayoutProps = {
|
||
nav: {
|
||
transparentMode: 'top',
|
||
},
|
||
};
|
||
```
|
||
|
||
| 模式 | 描述 |
|
||
| -------- | ------------------------------ |
|
||
| `always` | 始终使用透明背景 |
|
||
| `top` | 在页面顶部时 |
|
||
| `none` | 禁用透明背景（默认） |
|
||
|
||
### 替换导航栏
|
||
|
||
要替换文档布局中的导航栏，将 `nav.component` 设置为您自己的组件。
|
||
|
||
```tsx title="layout.tsx"
|
||
import { baseOptions } from '@/app/layout.config';
|
||
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
|
||
import type { ReactNode } from 'react';
|
||
|
||
export default function Layout({ children }: { children: ReactNode }) {
|
||
return (
|
||
<DocsLayout
|
||
{...baseOptions}
|
||
nav={{
|
||
component: <CustomNavbar />,
|
||
}}
|
||
>
|
||
{children}
|
||
</DocsLayout>
|
||
);
|
||
}
|
||
```
|
||
|
||
Fumadocs 使用 **CSS 变量**来共享布局组件的大小，并将每个布局组件放置在适当的位置。
|
||
|
||
您需要将 `--fd-nav-height` 覆盖为自定义导航栏的确切高度，这可以通过 CSS 样式表（例如在 `global.css` 中）完成：
|
||
|
||
```css
|
||
:root {
|
||
--fd-nav-height: 80px !important;
|
||
}
|
||
```
|
||
|
||
## 高级
|
||
|
||
### 禁用预取
|
||
|
||
默认情况下，它使用启用了预取的 Next.js Link 组件。
|
||
当链接组件出现在浏览器视口中时，内容（RSC 有效载荷）将被预取。
|
||
|
||
在 Vercel 上，这可能会导致大量使用无服务器函数和数据缓存。
|
||
它也可能会达到一些其他托管平台的限制。
|
||
|
||
您可以禁用预取以减少 RSC 请求的数量。
|
||
|
||
```tsx
|
||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||
|
||
<DocsLayout sidebar={{ prefetch: false }} />;
|
||
``` |