文档布局

文档页面的布局，它包括一个侧边栏和仅限移动设备的导航栏。

它是一个服务器组件，您不应该在客户端组件中引用它。

使用方法

将您的页面树传递给组件。

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>
  );
}

侧边栏

layout.tsx

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 设置为您自己的组件。

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 中）完成：

:root {
  --fd-nav-height: 80px !important;
}

高级

禁用预取

默认情况下，它使用启用了预取的 Next.js Link 组件。当链接组件出现在浏览器视口中时，内容（RSC 有效载荷）将被预取。

在 Vercel 上，这可能会导致大量使用无服务器函数和数据缓存。它也可能会达到一些其他托管平台的限制。

您可以禁用预取以减少 RSC 请求的数量。

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 
<DocsLayout sidebar={{ prefetch: false }} />;

目录