配置

页眉和页脚

以 Markdown 格式查看
企业功能

此功能仅适用于企业计划。如需开始使用，请联系 support@buildwithfern.com。

用您自己的 React 组件替换 Fern 的默认页眉或页脚。组件在服务器端渲染，以获得更好的 SEO 和性能，没有布局偏移。

替换页眉或页脚

1

创建您的组件

您的组件文件必须有一个返回 React 组件的默认导出。可以使用 Tailwind CSS 类，包括用于深色模式样式的 dark: 前缀：

components/CustomHeader.tsx
1export default function CustomHeader() {
2    return (
3        <header className="w-full py-4 px-6 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
4            <div className="max-w-7xl mx-auto flex items-center justify-between">
5                <span className="font-semibold text-lg">Plant Store</span>
6                <nav className="flex gap-4">
7                    <a href="/products">Products</a>
8                    <a href="/solutions">Solutions</a>
9                    <a href="/enterprise">Enterprise</a>
10                </nav>
11            </div>
12        </header>
13    );
14}
components/CustomFooter.tsx
1export default function CustomFooter() {
2    return (
3        <footer className="w-full py-8 px-6 bg-gray-100 dark:bg-gray-900">
4            <div className="max-w-7xl mx-auto text-sm text-gray-500">
5                © 2026 Plant Store. All rights reserved.
6            </div>
7        </footer>
8    );
9}
2

将组件路径添加到 docs.yml

docs.yml
1header: ./components/CustomHeader.tsx
2footer: ./components/CustomFooter.tsx
3

在 docs.yml 中指定您的组件目录

将您的组件目录添加到 docs.yml 中，这样 Fern CLI 就可以扫描您的组件目录并将它们上传到服务器。

docs.yml
1experimental:
2  mdx-components:
3    - ./components

增强您的组件

您的自定义组件可以使用 Fern 内置的 UI 原语、React hooks，或两者兼而有之。

您无需从头构建每个元素，可以重用 Fern 的内置原语，如搜索、导航和主题切换。自定义页眉和页脚组件接收一个包含这些内置 UI 组件的 Fern prop：

components/CustomHeader.tsx
1export default function CustomHeader({ Fern }) {
2    return (
3        <header className="w-full py-4 px-6 flex items-center justify-between">
4            <Fern.Logo />
5            <Fern.Search />
6            <nav className="flex items-center gap-4">
7                <Fern.NavbarLinks />
8                <Fern.ThemeSwitch />
9            </nav>
10        </header>
11    );
12}

Fern prop 上提供以下组件：

组件描述
<Fern.Logo />您在 docs.yml 中配置的网站标志。链接到主页。您可以使用 document.querySelector('#fern-header [data-fern-logo]') 来定位此组件。
<Fern.Search />搜索栏，如果启用的话包括 AI 搜索触发器。
<Fern.ProductSwitcher />用于在产品之间切换的下拉菜单。
<Fern.VersionSwitcher />用于在版本之间切换的下拉菜单。
<Fern.LanguageSwitcher />用于切换活动 SDK 语言的下拉菜单。
<Fern.NavbarLinks />在 docs.yml 的 navbar-links 下配置的导航链接。
<Fern.LoginButton />身份验证文档的登录/注册按钮。
<Fern.ThemeSwitch />在明暗模式之间切换。
<Fern.HamburgerMenu />Fern 内置的移动端侧边栏切换按钮。显示汉堡包/关闭图标并打开可关闭的侧边栏。仅在移动端视口上可见。

无论您是从头构建还是使用内置的 Fern 组件，您的自定义页眉和页脚组件都支持标准的 React hooks。例如，您可以使用 useState 构建一个点击时打开的下拉菜单：

components/CustomHeader.tsx
1import { useState } from "react";
2
3export default function CustomHeader() {
4    const [isOpen, setIsOpen] = useState(false);
5
6    return (
7        <header className="w-full py-4 px-6 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
8            <div className="max-w-7xl mx-auto flex items-center justify-between">
9                <span className="font-semibold text-lg">Plant Store</span>
10                <nav className="flex items-center gap-6">
11                    <div className="relative">
12                        <button
13                            onClick={() => setIsOpen(!isOpen)}
14                            className="flex items-center gap-1 hover:text-green-600 dark:hover:text-green-400"
15                        >
16                            Products
17                            <svg
18                                className={`w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
19                                fill="none"
20                                stroke="currentColor"
21                                viewBox="0 0 24 24"
22                            >
23                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
24                            </svg>
25                        </button>
26                        {isOpen && (
27                            <div className="absolute top-full left-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
28                                <a href="/products/indoor" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
29                                    Indoor Plants
30                                </a>
31                                <a href="/products/outdoor" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
32                                    Outdoor Plants
33                                </a>
34                                <a href="/products/succulents" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
35                                    Succulents
36                                </a>
37                            </div>
38                        )}
39                    </div>
40                    <a href="/solutions" className="hover:text-green-600 dark:hover:text-green-400">Solutions</a>
41                    <a href="/enterprise" className="hover:text-green-600 dark:hover:text-green-400">Enterprise</a>
42                </nav>
43            </div>
44        </header>
45    );
46}

使用 <Fern.HamburgerMenu /> 在您的自定义页眉中渲染 Fern 内置的移动端侧边栏切换按钮。这会打开与默认页眉使用的相同的可关闭侧边栏，包括任何导航链接、版本/产品切换器和搜索。

components/CustomHeader.tsx
1export default function CustomHeader({ Fern }) {
2    return (
3        <header className="w-full py-4 px-6 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
4            <div className="max-w-7xl mx-auto flex items-center justify-between">
5                <Fern.Logo />
6
7                {/* Desktop navigation */}
8                <nav className="hidden lg:flex items-center gap-6">
9                    <Fern.NavbarLinks />
10                    <Fern.ThemeSwitch />
11                </nav>
12
13                {/* Mobile: Fern's built-in hamburger menu toggle */}
14                <Fern.HamburgerMenu />
15            </div>
16        </header>
17    );
18}

该按钮在侧边栏关闭时自动显示汉堡包图标，在打开时显示关闭图标。它仅在移动端视口（< 1024px）上可见。

如果您需要完全自定义的移动端导航而不是 Fern 的内置侧边栏，您可以禁用默认的移动端侧边栏，并使用 React state 和 Tailwind 类构建自己的面板。

以下示例演示如何：

  1. 使用 useEffect hook 注入一个隐藏 Fern 默认移动端滑动面板的样式
  2. 渲染一个汉堡包按钮（仅在移动端可见），用于切换自定义侧面板
components/CustomHeader.tsx
1import { useEffect, useState } from "react";
2
3export default function CustomHeader({ Fern }) {
4    const [menuOpen, setMenuOpen] = useState(false);
5
6    // Hide Fern's default mobile swipe panel
7    useEffect(() => {
8        const style = document.createElement("style");
9        style.textContent = `
10            #fern-sidebar[data-viewport="mobile"],
11            #fern-sidebar-overlay {
12                display: none !important;
13            }
14        `;
15        document.head.appendChild(style);
16        return () => {
17            style.remove();
18        };
19    }, []);
20
21    return (
22        <header className="relative w-full py-4 px-6 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
23            <div className="max-w-7xl mx-auto flex items-center justify-between">
24                <Fern.Logo />
25
26                {/* Desktop navigation */}
27                <nav className="hidden lg:flex items-center gap-6">
28                    <Fern.NavbarLinks />
29                    <Fern.ThemeSwitch />
30                </nav>
31
32                {/* Mobile menu button - visible only on small screens */}
33                <button
34                    className="lg:hidden p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
35                    onClick={() => setMenuOpen(!menuOpen)}
36                    aria-label="Toggle menu"
37                >
38                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
39                        {menuOpen ? (
40                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
41                        ) : (
42                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
43                        )}
44                    </svg>
45                </button>
46            </div>
47
48            {/* Custom mobile side panel */}
49            <div
50                className={`
51                    fixed top-[var(--header-height)] right-0 bottom-0 w-72
52                    bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800
53                    transform transition-transform duration-300 ease-in-out z-50
54                    ${menuOpen ? "translate-x-0" : "translate-x-full"}
55                    lg:hidden
56                `}
57            >
58                <nav className="flex flex-col p-6 gap-4">
59                    <Fern.NavbarLinks />
60                    <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
61                        <Fern.ThemeSwitch />
62                    </div>
63                </nav>
64            </div>
65
66            {/* Overlay when mobile menu is open */}
67            {menuOpen && (
68                <div
69                    className="fixed inset-0 top-[var(--header-height)] bg-black/40 z-40 lg:hidden"
70                    onClick={() => setMenuOpen(false)}
71                />
72            )}
73        </header>
74    );
75}

useEffect hook 注入了一个 CSS 规则，目标是 #fern-sidebar[data-viewport="mobile"] 和 #fern-sidebar-overlay 来隐藏 Fern 的默认移动端侧边栏。这可以防止内置的滑动打开手势显示 Fern 的侧边栏，因此您的自定义面板是唯一的移动端导航。