MkSaaS文档Layouts
文档布局
文档的布局
文档页面的布局，它包括一个侧边栏和仅限移动设备的导航栏。
它是一个服务器组件，您不应该在客户端组件中引用它。
使用方法
将您的页面树传递给组件。
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 } from 'fumadocs-ui/layouts/docs';
<DocsLayout
sidebar={{
// sidebar options:
enabled: true,
}}
/>;侧边栏标签
有关用法，请参见导航指南。
装饰
更改标签的图标/样式。
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
<DocsLayout
sidebar={{
tabs: {
transform: (option, node) => ({
...option,
icon: 'my icon',
}),
},
}}
/>;导航栏
一个仅限移动设备的导航栏，我们建议从 baseOptions 自定义它。
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
export const baseOptions: BaseLayoutProps = {
githubUrl: 'https://github.com/fuma-nama/fumadocs',
nav: {
title: 'My App',
},
};透明模式
要使导航栏背景透明，您可以配置透明模式。
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
export const baseOptions: BaseLayoutProps = {
nav: {
transparentMode: 'top',
},
};| 模式 | 描述 |
|---|---|
always | 始终使用透明背景 |
top | 在页面顶部时 |
none | 禁用透明背景（默认） |
替换导航栏
要替换文档布局中的导航栏，将 nav.component 设置为您自己的组件。
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 中）完成：
:root {
--fd-nav-height: 80px !important;
}高级
禁用预取
默认情况下，它使用启用了预取的 Next.js Link 组件。 当链接组件出现在浏览器视口中时，内容（RSC 有效载荷）将被预取。
在 Vercel 上，这可能会导致大量使用无服务器函数和数据缓存。 它也可能会达到一些其他托管平台的限制。
您可以禁用预取以减少 RSC 请求的数量。
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
<DocsLayout sidebar={{ prefetch: false }} />;