布局链接

概述

Fumadocs 允许通过 links prop 为您的布局添加额外的链接，例如链接到您的“展示”页面。

lib/layout.shared.tsx

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

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

您可以在下面看到所有支持的项目：

链接项

一个导航到 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: '博客',
        url: '/blog',
        // secondary items will be displayed differently on navbar
        secondary: false,
      },
    ],
  };
}

活动模式

被标记为活动的条件。

Mode	Description
`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: '博客',
        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: '访问博客', // `aria-label`
        icon: <BookIcon />,
        text: '博客',
        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">登录</Button>,
        secondary: true,
      },
    ],
  };
}

GitHub URL

还有一个添加 GitHub 仓库链接项的快捷方式。

lib/layout.shared.tsx

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

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

普通菜单

一个包含多个链接项的菜单。

lib/layout.shared.tsx

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

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        type: 'menu',
        text: '指南',
        items: [
          {
            text: '入门',
            description: '学习使用 Fumadocs',
            url: '/docs',
          },
        ],
      },
    ],
  };
}

导航菜单

在 Home Layout 中，您可以将导航菜单（完全动画）添加到导航栏。

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',
          // only displayed on navbar, not mobile menu
          on: 'nav',
          children: (
            <NavbarMenu>
              <NavbarMenuTrigger>文档</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="/docs">你好世界</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenu>
          ),
        },
        // other items
      ]}
    >
      {children}
    </HomeLayout>
  );
}

On this page