Flux レイアウト
極限までミニマルなドキュメント向けレイアウト
実用性を度外視したほどミニマルでクリーンな Docs レイアウトです。もともとは実験的な目的で作られました。
Flux Layout
Install via Fumadocs CLI
For advanced customization that supported options cannot suffice.
npx @fumadocs/cli@latest customize使い方
fumadocs-ui/layouts/flux を使用して Flux レイアウトを有効にします。
import { DocsLayout } from 'fumadocs-ui/layouts/flux';
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/flux/page'; 注意事項
- 静的/ローカル検索と組み合わせて使うのがおすすめです。ドキュメント検索を使うほうが効率よくナビゲーションできます。
- ユーザー体験よりも主観的な見た目の美しさを優先しています。
- 独自の設計方針に基づいているため、カスタマイズしたい場合は Fumadocs CLI を使用してください。
設定
オプションは Docs レイアウト から継承されますが、いくつか違いがあります。
- Flux レイアウトはクライアントコンポーネントであるため、サーバーコンポーネントからシリアライズできない props を渡すことはできません。
- 下部のナビゲーションパネルをカスタマイズするための
renderNavigationPanelprop が追加されています。 tocPopoverオプションはありません。
How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep