注意本布局
Docs 布局的精简版
<DocsLayout /> 的紧凑版本。
🌐 A compact version of <DocsLayout />.
Install via Fumadocs CLI
For advanced customisation that supported options cannot suffice.
npx @fumadocs/cli@latest customise使用
🌐 Usage
使用 fumadocs-ui/layouts/notebook 启用注意本布局。
🌐 Enable the notebook layout with fumadocs-ui/layouts/notebook.
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<DocsLayout {...baseOptions()} tree={source.getPageTree()}>
{children}
</DocsLayout>
);
}配置
🌐 Configurations
这些选项继承自 Docs Layout，有一些小的差异：
🌐 The options are inherited from Docs Layout, with minor differences:
- 侧边栏/导航栏无法替换，注意本布局比默认布局更有固定意见。
- 其他选项（见下文）。
标签模式
🌐 Tab Mode
配置侧边栏选项卡的样式。
🌐 Configure the style of sidebar tabs.
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<DocsLayout
{...baseOptions()}
tabMode="navbar"
tree={source.getPageTree()}
>
{children}
</DocsLayout>
);
}导航模式
🌐 Nav Mode
配置导航栏的样式。
🌐 Configure the style of navbar.
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
const { nav, ...base } = baseOptions();
return (
<DocsLayout
{...base}
nav={{ ...nav, mode: 'top' }}
tree={source.getPageTree()}
>
{children}
</DocsLayout>
);
}Last updated on