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 优化，有几种方法。首先，允许文档生成器提供 metadata 帮助程序：
export { createMetadata }
默认值包括 标题、描述、开放图形（Open Graph）和 Twitter 图片、规范（Canonical）URL 和 locale 元数据。
支持无限级别的标题。从页面内容中提取，您应该通过 toc 字段传递它。
可以定制 TOC（目录）的呈现方式，但您仍然需要通过 toc 字段传递真实的 TOC 项目。
您可以创建一个 baseOptions 对象，用于所有页面和布局组件。
您可以在 createAdjacentPages 方法中应用 includeInPageNav 过滤器，该方法由文档生成器创建：
import { createAdjacentPages }
/>
);
}
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,
});
文档页面 | MkSaaS - 最好的 AI SaaS 模板
MkSaaS文档