Layouts
文档布局
文档的布局
MkSaaS文档文档的布局
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>
import { DocsLayout }
有关用法，请参见导航指南。
更改标签的图标/样式。
import { DocsLayout }
一个仅限移动设备的导航栏，我们建议从 baseOptions 自定义它。
import type
要使导航栏背景透明，您可以配置透明模式。
import type
| 模式 | 描述 |
|---|---|
always | 始终使用透明背景 |
top | 在页面顶部时 |
none | 禁用透明背景（默认） |
要替换文档布局中的导航栏，将 nav.component 设置为您自己的组件。
import { baseOptions }
Fumadocs 使用 CSS 变量来共享布局组件的大小，并将每个布局组件放置在适当的位置。
您需要将 --fd-nav-height 覆盖为自定义导航栏的确切高度，这可以通过 CSS 样式表（例如在 global.css 中）完成：
:root {
--fd-nav-height: 80px !important;
}默认情况下，它使用启用了预取的 Next.js Link 组件。 当链接组件出现在浏览器视口中时，内容（RSC 有效载荷）将被预取。
在 Vercel 上，这可能会导致大量使用无服务器函数和数据缓存。 它也可能会达到一些其他托管平台的限制。
您可以禁用预取以减少 RSC 请求的数量。
import { DocsLayout }