Notebook 版面配置

<DocsLayout /> 的精簡版本。

Notebook Layout

themeSwitch

searchToggle

nav

tabMode

sidebar

Install via Fumadocs CLI

For advanced customization that supported options cannot suffice.

npx @fumadocs/cli@latest customize

使用方式

透過 fumadocs-ui/layouts/notebook 啟用 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.getPageTree()}>
      {children}
    </DocsLayout>
  );
}

請記得一併更新頁面中的匯入：

page.tsx

import { ... } from 'fumadocs-ui/layouts/docs/page'; 
import { ... } from 'fumadocs-ui/layouts/notebook/page';

設定

選項繼承自文件版面配置，但有些許差異：

無法替換側邊欄／導覽列，因為 Notebook 版面配置的設計比預設版面配置更有既定取向。
提供額外選項 (請見下方) 。

頁籤模式

設定版面配置頁籤的樣式。如何新增版面配置頁籤，請參閱連結的文件。

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()}
      tabMode="navbar" 
      tree={source.getPageTree()}
    >
      {children}
    </DocsLayout>
  );
}

導覽模式

設定導覽列的樣式。

以下是使用頁籤模式 navbar 與導覽模式 top 的範例：

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

AI 聊天

與文件版面配置相同。

Notebook 版面配置

使用方式複製錨點連結

設定複製錨點連結

頁籤模式複製錨點連結

導覽模式複製錨點連結

AI 聊天複製錨點連結

本頁目錄

使用方式

設定

頁籤模式

導覽模式

AI 聊天