Spacious 版面配置

這是 <DocsLayout /> 較為寬鬆的版本：頁面位於側邊欄旁的內嵌面板中，頁面層級的操作則置於面板頂端。

Spacious Layout

nav

themeSwitch

searchToggle

僅限 Base UI

Spacious 版面配置僅適用於 Base UI 版本的 Fumadocs UI (@fumadocs/base-ui) 。

Install via Fumadocs CLI

For advanced customization that supported options cannot suffice.

npx @fumadocs/cli@latest customize

使用方式

請透過 fumadocs-ui/layouts/spacious 啟用 Spacious 版面配置。

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/spacious'; 
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/spacious/page';

樣式

與 Glass 版面配置相同，Spacious 版面配置的樣式不會打包進 CSS 預設組合，因此只有在使用此版面配置時才會產生額外負擔。請在您的 Tailwind CSS 檔案中匯入這些樣式：

Tailwind CSS

@import 'tailwindcss';
@import 'fumadocs-ui/css/generated/spacious.css';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

注意事項

Spacious 版面配置是用戶端元件，因此您無法從伺服器元件傳入無法序列化的 props。
在桌面版中，頁面會在面板內捲動，而不是整個視窗捲動。

設定

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

sidebar 選項僅接受 defaultOpenLevel 與 prefetch，且側邊欄一律可收合。
另有額外選項 (請見下方) 。

版面配置頁籤

使用 tabs prop 設定版面配置頁籤，新增方式請參閱該連結文件。頁籤會以下拉選單的形式顯示在側邊欄頂端。

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/spacious';
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()}
      tabs={
        {
          // 自訂頁籤
        }
      }
      tree={source.getPageTree()}
    >
      {children}
    </DocsLayout>
  );
}

AI 聊天

傳入包含開啟狀態與變更處理函式的 aiChat 物件，即可在版面配置中顯示詢問 AI。

使用 panel 選項時，版面配置會替您算繪聊天面板：在寬螢幕上，面板會固定在頁面旁 (目錄會移至頁面的頁首) ；在較小的螢幕上，則會浮動顯示於頁面上方。

layout.tsx

'use client';
import { DocsLayout } from 'fumadocs-ui/layouts/spacious';
import { useState } from 'react';

export function Layout({ children }) {
  const [open, setOpen] = useState(false);

  return (
    <DocsLayout
      aiChat={{
        open,
        onOpenChange: setOpen,
        panel: <MyChat />,
      }}
      // ...
    >
      {children}
    </DocsLayout>
  );
}

Slots

除了共用的 slot (navTitle、themeSwitch、searchTrigger、languageSelect) 之外，Spacious 版面配置還提供 slots 選項，可用來覆寫版面的各個部分。

Slot	說明
`header`	行動裝置上的導覽列。
`sidebar`	側邊欄系統：`provider`、`main` (桌面版) 及 `drawer` (行動版) 。
`actions`	頁面右上角的操作按鈕，例如語言切換器與選項選單。

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/spacious';

<DocsLayout
  slots={{
    actions: MyActions, 
  }}
  // ...
/>;

文件頁面

此頁面元件與文件頁面類似，但有以下幾點差異：

目錄預設使用 block 樣式。
tableOfContentPopover 用於設定頁面頁首中的目錄下拉選單，以及行動裝置上的目錄列。
slots.toc 接受 dropdown 元件，作為頁面頁首中的下拉選單。
沒有 container slot。

Spacious 版面配置

使用方式複製錨點連結

樣式複製錨點連結

設定複製錨點連結

版面配置頁籤複製錨點連結

AI 聊天複製錨點連結

Slots複製錨點連結

文件頁面複製錨點連結

本頁目錄

使用方式

樣式

設定

版面配置頁籤

AI 聊天

Slots

文件頁面