版面配置連結

概覽

Fumadocs 可讓您透過 links prop 在版面配置中加入導覽連結，例如連結到您的「展示」頁面。

lib/layout.shared.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [], 
  };
}

所有支援的項目如下：

連結項目

用於前往某個 URL/href 的連結，也可以是外部連結。

lib/layout.shared.tsx

import { BookIcon } from 'lucide-react';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        icon: <BookIcon />,
        text: 'Blog',
        url: '/blog',
        // 次要項目在導覽列上會以不同方式顯示
        secondary: false,
      },
    ],
  };
}

啟用模式

連結項目被標示為啟用狀態的條件。

模式	說明
`url`	瀏覽指定的 URL 時
`nested-url`	瀏覽該 URL 及其子頁面 (例如 `/blog/post`) 時
`none`	永不啟用

lib/layout.shared.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        text: 'Blog',
        url: '/blog',
        active: 'nested-url',
      },
    ],
  };
}

圖示項目

與連結項目相同，但會顯示為圖示按鈕。圖示項目預設為次要項目。

lib/layout.shared.tsx

import { BookIcon } from 'lucide-react';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        type: 'icon',
        label: 'Visit Blog', // `aria-label`
        icon: <BookIcon />,
        text: 'Blog',
        url: '/blog',
      },
    ],
  };
}

自訂項目

顯示自訂元件。

lib/layout.shared.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        type: 'custom',
        children: <Button variant="primary">Login</Button>,
        secondary: true,
      },
    ],
  };
}

GitHub URL

此外，也提供了快速新增 GitHub 儲存庫連結項目的捷徑。

lib/layout.shared.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function (): BaseLayoutProps {
  return {
    : 'https://github.com',
  };
}

包含多個連結項目的選單。

lib/layout.shared.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        type: 'menu',
        text: 'Guide',
        items: [
          {
            text: 'Getting Started',
            description: 'Learn to use Fumadocs',
            url: '/docs',
          },
        ],
      },
    ],
  };
}

在首頁版面配置中，您可以在導覽列加入導覽選單 (附完整動畫效果) 。

app/(home)/layout.tsx

import { baseOptions } from '@/lib/layout.shared';
import type { ReactNode } from 'react';
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import {
  NavbarMenu,
  NavbarMenuContent,
  NavbarMenuLink,
  NavbarMenuTrigger,
} from 'fumadocs-ui/layouts/home/navbar';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <HomeLayout
      {...baseOptions()}
      links={[
        {
          type: 'custom',
          // 僅顯示於導覽列，不會出現在行動版選單
          on: 'nav',
          children: (
            <NavbarMenu>
              <NavbarMenuTrigger>Documentation</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="/docs">Hello World</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenu>
          ),
        },
        // 其他項目
      ]}
    >
      {children}
    </HomeLayout>
  );
}

版面配置連結

概覽

連結項目

啟用模式

圖示項目

自訂項目

GitHub URL

一般選單

導覽選單

本頁目錄

版面配置連結

概覽複製錨點連結

連結項目複製錨點連結

啟用模式複製錨點連結

圖示項目複製錨點連結

自訂項目複製錨點連結

GitHub URL複製錨點連結

一般選單複製錨點連結

導覽選單複製錨點連結

本頁目錄

概覽

連結項目

啟用模式

圖示項目

自訂項目

GitHub URL

一般選單

導覽選單