# Fumadocs UI (the default theme of Fumadocs): Spacious 版面配置
URL: /zh-TW/docs/ui/layouts/spacious
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/layouts/spacious.zh-TW.mdx

比文件版面配置更寬鬆的版本

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

<spacious.WithControl />

<Callout title="僅限 Base UI">
Spacious 版面配置僅適用於 Base UI 版本的 Fumadocs UI (`@fumadocs/base-ui`) 。
</Callout>

For advanced customization that supported options cannot suffice, install via Fumadocs CLI:

```bash
npx @fumadocs/cli@latest customize
```

## 使用方式 [#usage]

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

```tsx title="layout.tsx"
import { DocsLayout } from 'fumadocs-ui/layouts/spacious'; // [!code highlight]
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>
  );
}
```

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

```tsx title="page.tsx"
import { ... } from 'fumadocs-ui/layouts/docs/page'; // [!code --]
import { ... } from 'fumadocs-ui/layouts/spacious/page'; // [!code ++]
```

### 樣式 [#styles]

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

```css title="Tailwind CSS"
@import 'tailwindcss';
/* [!code ++] */
@import 'fumadocs-ui/css/generated/spacious.css';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
```

<Callout title="注意事項">
* Spacious 版面配置是**用戶端元件**，因此您無法從伺服器元件傳入無法序列化的 props。
* 在桌面版中，頁面會在面板內捲動，而不是整個視窗捲動。
</Callout>

## 設定 [#configurations]

這些選項繼承自[文件版面配置](/docs/ui/layouts/docs)，但有些許差異：

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

### 版面配置頁籤 [#layout-tabs]

使用 `tabs` prop 設定[版面配置頁籤](/docs/ui/layouts/docs#layout-tabs)，新增方式請參閱該連結文件。頁籤會以下拉選單的形式顯示在側邊欄頂端。

```tsx title="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 聊天 [#ai-chat]

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

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

```tsx title="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
      // [!code ++:5]
      aiChat={{
        open,
        onOpenChange: setOpen,
        panel: <MyChat />,
      }}
      // ...
    >
      {children}
    </DocsLayout>
  );
}
```

### Slots [#slots]

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

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

```tsx title="layout.tsx"
import { DocsLayout } from 'fumadocs-ui/layouts/spacious';

<DocsLayout
  slots={{
    actions: MyActions, // [!code ++]
  }}
  // ...
/>;
```

## 文件頁面 [#docs-page]

此頁面元件與[文件頁面](/docs/ui/layouts/page)類似，但有以下幾點差異：

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