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

版面配置元件清單。

## 概覽 [#overview]

Fumadocs UI 提供呈現內容所需的基本版面配置。

- [版面配置連結](/zh-TW/docs/ui/layouts/links): 適用於所有版面配置的導覽設定。
- [導覽列](/zh-TW/docs/ui/layouts/nav): 導覽列／頁首設定。
- [文件版面配置](/zh-TW/docs/ui/layouts/docs): 文件的版面配置
- [Flux 版面配置](/zh-TW/docs/ui/layouts/flux): 極致精簡的文件版面配置
- [Glass 版面配置](/zh-TW/docs/ui/layouts/glass): 採用浮動式半透明側邊欄與頁首的文件版面配置
- [首頁版面配置](/zh-TW/docs/ui/layouts/home-layout): 供其他頁面共用的版面配置
- [Notebook 版面配置](/zh-TW/docs/ui/layouts/notebook): 文件版面配置的精簡版本
- [Spacious 版面配置](/zh-TW/docs/ui/layouts/spacious): 比文件版面配置更寬鬆的版本
- [文件頁面](/zh-TW/docs/ui/layouts/page): 您文件中的一個頁面
- [Root Provider](/zh-TW/docs/ui/layouts/root-provider): Fumadocs UI 的 Context Provider。

### 設定 [#configurations]

每個版面配置都支援一組共用的選項。

建議您將這些選項存放在一個檔案中，再傳遞給各個版面配置。

```tsx tab="Shared Options" title="lib/layout.shared.tsx"
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      title: 'My App',
    },
  };
}
```

```tsx tab="Docs Layout" title="app/docs/layout.tsx"
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
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
      // [!code highlight]
      {...baseOptions()}
      tree={source.getPageTree()}
    >
      {children}
    </DocsLayout>
  );
}
```

```tsx tab="Home Layout" title="app/(home)/layout.tsx"
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import { baseOptions } from '@/lib/layout.shared';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <HomeLayout
      // [!code highlight]
      {...baseOptions()}
    >
      {children}
    </HomeLayout>
  );
}
```

關於 [`links`](/docs/ui/layouts/links) 與 [`nav`](/docs/ui/layouts/nav) 選項的詳細說明，請參閱相關文件。

### BaseLayoutProps

| Prop            | Type                                         | Description       |
| --------------- | -------------------------------------------- | ----------------- |
| `githubUrl?`    | `string \| undefined`                        | GitHub url        |
| `links?`        | `LinkItemType[] \| undefined`                |                   |
| `nav?`          | `NavOptions \| undefined`                    | navigation config |
| `slots?`        | `Partial<BaseSlots> \| undefined`            |                   |
| `children?`     | `ReactNode`                                  |                   |
| `themeSwitch?`  | `ThemeSwitchOptions \| undefined`            |                   |
| `searchToggle?` | `SearchToggleOptions \| undefined`           |                   |
| `i18n?`         | `boolean \| I18nConfig<string> \| undefined` | **Deprecated.**   |