Notebook

Install via Fumadocs CLI

For advanced customisation that supported options cannot suffice.

npx @fumadocs/cli@latest customise

笔记本

使用

使用 fumadocs-ui/layouts/notebook 启用笔记本布局，它比默认布局更紧凑。

layout.tsx

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.pageTree}>
      {children}
    </DocsLayout>
  );
}

配置

选项继承自文档布局，有细微差异：

侧边栏/导航栏无法替换，笔记本布局比默认布局更有主见。
额外选项（见下文）。

标签模式

配置侧边栏标签的样式。

笔记本

layout.tsx

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.pageTree}
    >
      {children}
    </DocsLayout>
  );
}

导航模式

配置导航栏的样式。

layout.tsx

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.pageTree}
    >
      {children}
    </DocsLayout>
  );
}

使用

配置

标签模式

导航模式

On this page