Glass 版面配置

以浮動、半透明 (類似玻璃) 面板為核心設計的文件版面配置：側邊欄與頁首並非固定的欄位，而是以圓角、模糊效果的面板形式疊放在內容上方。

Glass Layout

nav

themeSwitch

searchToggle

sidebar

Install via Fumadocs CLI

For advanced customization that supported options cannot suffice.

npx @fumadocs/cli@latest customize

使用方式

透過 fumadocs-ui/layouts/glass 啟用 Glass 版面配置。

layout.tsx

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

樣式

與其他版面配置不同，Glass 版面配置的樣式並未打包進 CSS 預設組合中，因此只有在您實際使用此版面配置時，才會增加額外負擔。請在您的 Tailwind CSS 檔案中匯入這些樣式：

Tailwind CSS

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

重要須知

Glass 版面配置是用戶端元件，您無法從伺服器元件傳入無法序列化的 props。
此版面配置的設計較為固定：側邊欄與頁首的彈性不如預設版面配置，如需自訂，請使用 Fumadocs CLI 或 slots 選項。

設定

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

沒有 sidebar 選項，因為 Glass 版面配置的設計比預設版面配置更具既定風格。
提供額外的選項 (請見下文) 。

版面配置頁籤

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

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/glass';
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 按鈕。請傳入含有開啟狀態與變更處理函式的 aiChat 物件，以控制您的 AI 搜尋對話方塊。在寬螢幕上，版面配置會將您的聊天 panel 放在頁面旁邊；在較小的螢幕上，則會讓它浮動於頁面上方。

layout.tsx

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

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

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

Slots

與其他版面配置相同，Glass 版面配置提供 slots 選項，除了共用的 slot (navTitle、themeSwitch、searchTrigger、languageSelect) 之外，也可用來覆寫內建的 header、sidebar 和 sidebarDrawer (行動版) 元件。

layout.tsx

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

<DocsLayout
  slots={{
    header: MyHeader, 
  }}
  // ...
/>;

Glass 版面配置

使用方式複製錨點連結

樣式複製錨點連結

設定複製錨點連結

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

AI 聊天複製錨點連結

Slots複製錨點連結

本頁目錄

使用方式

樣式

設定

版面配置頁籤

AI 聊天

Slots