LogoMkSaaS文档
Layouts

文档页面

文档中的页面

可以渲染完整页面的组件(标题、目录等)。

正文

page.tsx
import { DocsPage } from 'fumadocs-ui/page';

export default function Page({ params }: { params: { slug?: string[] } }) {
  const page = getPage(params);

  return (
    <DocsPage
      title={page.title}
      description={page.description}
      mdx={page.body}
      toc={page.toc}
    />
  );
}

SEO

为页面添加 SEO 优化,有几种方法。首先,允许文档生成器提供 metadata 帮助程序:

api.ts
export { createMetadata } from 'fumadocs-core/docs';

默认值包括 标题描述开放图形(Open Graph)和 Twitter 图片、规范(Canonical)URL 和 locale 元数据。

现在您可以直接使用它:

page.tsx
import type { Metadata } from 'next';
import { createMetadata } from '@/app/api';

export async function generateMetadata({
  params,
}: {
  params: { slug?: string[] };
}): Promise<Metadata> {
  const page = await getPage(params);

  return createMetadata({
    page,
    params,
  });
}

或者您可以手动构建它:

page.tsx
import type { Metadata } from 'next';
import { absoluteUrl } from 'fumadocs-core/utils/absolute-url';

export const metadata: Metadata = {
  title: 'My Page',
  description: 'Page Description',
  openGraph: {
    title: 'My Page',
    description: 'Page Description',
    type: 'article',
    url: absoluteUrl('/docs/my-page'),
  },
  twitter: {
    title: 'My Page',
    description: 'Page Description',
    card: 'summary_large_image',
  },
  alternates: {
    canonical: absoluteUrl('/docs/my-page'),
  },
};

内容目录

支持无限级别的标题。从页面内容中提取,您应该通过 toc 字段传递它。

page.tsx
import { DocsPage } from 'fumadocs-ui/page';
import { getToc } from 'fumadocs-core';

export default function Page() {
  const toc = getToc(content);

  return <DocsPage toc={toc} />;
}

自定义内容目录

可以定制 TOC(目录)的呈现方式,但您仍然需要通过 toc 字段传递真实的 TOC 项目。

page.tsx
import { DocsPage } from 'fumadocs-ui/page';

export default function Page() {
  return (
    <DocsPage tocClassName="hidden lg:block" toc={toc}>
      <div>Custom TOC</div>
    </DocsPage>
  );
}

最后更新时间

page.tsx
import { DocsPage } from 'fumadocs-ui/page';

export default function Page() {
  return <DocsPage lastUpdatedAt={new Date()} />;
}

页脚

layout.tsx
import { DocsPage } from 'fumadocs-ui/page';
import { baseOptions } from '@/app/layout.config';

export default function Page() {
  return (
    <DocsPage
      footer={{
        text: 'Built with Fumadocs',
      }}
    />
  );
}

使用基础配置

您可以创建一个 baseOptions 对象,用于所有页面和布局组件。

layout.config.ts
import type { BasePageConfig } from 'fumadocs-ui/page';

export const baseOptions: BasePageConfig = {
  githubUrl: 'https://github.com/fuma-nama/fumadocs',
  footer: {
    text: 'Built with Fumadocs',
  },
};
page.tsx
import { DocsPage } from 'fumadocs-ui/page';
import { baseOptions } from '@/app/layout.config';

export default function Page() {
  return <DocsPage {...baseOptions} />;
}

编辑链接

import { DocsPage } from 'fumadocs-ui/page';

export default function Page() {
  return (
    <DocsPage
      gitTimestamp={true}
      footer={{
        // Edit Link
        editLink: {
          text: 'Edit this page',
          url: 'https://github.com/username/repo/blob/main',
        },
      }}
    />
  );
}

页面导航

import { DocsPage } from 'fumadocs-ui/page';
import { getPagesPath } from 'fumadocs-core';

export default function Page({ params }: { params: { slug?: string[] } }) {
  const pagePath = getPagesPath(params);
  const prev = getAdjacentPages({ current: pagePath, dir: 'prev' });
  const next = getAdjacentPages({ current: pagePath, dir: 'next' });

  return (
    <DocsPage
      footer={{
        navigation: {
          prev: prev?.url
            ? {
                title: prev.title,
                href: prev.url,
              }
            : undefined,
          next: next?.url
            ? {
                title: next.title,
                href: next.url,
              }
            : undefined,
        },
      }}
    />
  );
}

自定义获取相邻页面

您可以在 createAdjacentPages 方法中应用 includeInPageNav 过滤器,该方法由文档生成器创建:

api.ts
import { createAdjacentPages } from 'fumadocs-core/docs';
import { tree } from '@/app/source';

export const getAdjacentPages = createAdjacentPages(tree, {
  includeInPageNav: (page) => !page.data.preview,
});