Layouts
文档页面
文档中的页面
可以渲染完整页面的组件(标题、目录等)。
正文
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
帮助程序:
export { createMetadata } from 'fumadocs-core/docs';
默认值包括 标题、描述、开放图形(Open Graph)和 Twitter 图片、规范(Canonical)URL 和 locale 元数据。
现在您可以直接使用它:
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,
});
}
或者您可以手动构建它:
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
字段传递它。
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 项目。
import { DocsPage } from 'fumadocs-ui/page';
export default function Page() {
return (
<DocsPage tocClassName="hidden lg:block" toc={toc}>
<div>Custom TOC</div>
</DocsPage>
);
}
最后更新时间
import { DocsPage } from 'fumadocs-ui/page';
export default function Page() {
return <DocsPage lastUpdatedAt={new Date()} />;
}
页脚
import { DocsPage } from 'fumadocs-ui/page';
import { baseOptions } from '@/app/layout.config';
export default function Page() {
return (
<DocsPage
footer={{
text: 'Built with Fumadocs',
}}
/>
);
}
使用基础配置
您可以创建一个 baseOptions
对象,用于所有页面和布局组件。
import type { BasePageConfig } from 'fumadocs-ui/page';
export const baseOptions: BasePageConfig = {
githubUrl: 'https://github.com/fuma-nama/fumadocs',
footer: {
text: 'Built with Fumadocs',
},
};
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
过滤器,该方法由文档生成器创建:
import { createAdjacentPages } from 'fumadocs-core/docs';
import { tree } from '@/app/source';
export const getAdjacentPages = createAdjacentPages(tree, {
includeInPageNav: (page) => !page.data.preview,
});