LogoMkSaaS文档
LogoMkSaaS文档
首页

介绍

快速入门什么是 Fumadocs对比

设置

手动安装静态导出

写作

Markdown国际化

UI

概览主题搜索
组件
MDX
文档布局主页布局笔记本文档页面根提供者
X (Twitter)
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 }

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

现在您可以直接使用它：

page.tsx
import type

或者您可以手动构建它：

page.tsx
import type

内容目录

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

page.tsx
import { DocsPage }

自定义内容目录

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

page.tsx
import { DocsPage }

最后更新时间

page.tsx
import { DocsPage }

页脚

layout.tsx
import { DocsPage }

使用基础配置

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

layout.config.ts
import type
page.tsx
import { DocsPage }

编辑链接

import { DocsPage }

页面导航

import { DocsPage }

自定义获取相邻页面

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

api.ts
import { createAdjacentPages }

笔记本

文档布局的更紧凑版本

根提供者

Fumadocs UI 的上下文提供者

目录

正文
SEO
内容目录
自定义内容目录
最后更新时间
页脚
使用基础配置
编辑链接
页面导航
自定义获取相邻页面
/>
);
}
from
'fumadocs-core/docs'
;
{ 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,
});
}
{ 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'),
},
};
from
'fumadocs-ui/page'
;
import { getToc } from 'fumadocs-core';
export default function Page() {
const toc = getToc(content);
return <DocsPage toc={toc} />;
}
from
'fumadocs-ui/page'
;
export default function Page() {
return (
<DocsPage tocClassName="hidden lg:block" toc={toc}>
<div>Custom TOC</div>
</DocsPage>
);
}
from
'fumadocs-ui/page'
;
export default function Page() {
return <DocsPage lastUpdatedAt={new Date()} />;
}
from
'fumadocs-ui/page'
;
import { baseOptions } from '@/app/layout.config';
export default function Page() {
return (
<DocsPage
footer={{
text: 'Built with Fumadocs',
}}
/>
);
}
{ BasePageConfig }
from
'fumadocs-ui/page'
;
export const baseOptions: BasePageConfig = {
githubUrl: 'https://github.com/fuma-nama/fumadocs',
footer: {
text: 'Built with Fumadocs',
},
};
from
'fumadocs-ui/page'
;
import { baseOptions } from '@/app/layout.config';
export default function Page() {
return <DocsPage {...baseOptions} />;
}
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',
},
}}
/>
);
}
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,
},
}}
/>
);
}
from
'fumadocs-core/docs'
;
import { tree } from '@/app/source';
export const getAdjacentPages = createAdjacentPages(tree, {
includeInPageNav: (page) => !page.data.preview,
});