Notebook レイアウト
Docs レイアウトのコンパクト版
<DocsLayout /> のコンパクト版です。
Notebook Layout
Install via Fumadocs CLI
For advanced customization that supported options cannot suffice.
npx @fumadocs/cli@latest customize使い方
fumadocs-ui/layouts/notebook を使用して 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>
);
}ページの import も忘れずに更新してください。
import { ... } from 'fumadocs-ui/layouts/docs/page';
import { ... } from 'fumadocs-ui/layouts/notebook/page'; 設定
オプションは Docs レイアウト から継承されますが、いくつか違いがあります。
- サイドバーやナビゲーションバーは置き換えられません。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()}
tabMode="navbar"
tree={source.getPageTree()}
>
{children}
</DocsLayout>
);
}ナビゲーションモード
ナビゲーションバーのスタイルを設定します。
以下は、タブモードを navbar、ナビゲーションモードを top にした場合の例です。
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 チャット
Docs レイアウトと同じです。
How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep