--- title: 文档页面 description: 文档中的页面 --- 可以渲染完整页面的组件(标题、目录等)。 ## 正文 ```tsx title="page.tsx" import { DocsPage } from 'fumadocs-ui/page'; export default function Page({ params }: { params: { slug?: string[] } }) { const page = getPage(params); return ( ); } ``` {/* */} ### SEO 为页面添加 SEO 优化,有几种方法。首先,允许文档生成器提供 `metadata` 帮助程序: ```tsx title="api.ts" export { createMetadata } from 'fumadocs-core/docs'; ``` 默认值包括 **标题**、**描述**、**开放图形**(Open Graph)和 **Twitter** 图片、**规范**(Canonical)URL 和 locale 元数据。 现在您可以直接使用它: ```tsx title="page.tsx" import type { Metadata } from 'next'; import { createMetadata } from '@/app/api'; export async function generateMetadata({ params, }: { params: { slug?: string[] }; }): Promise { const page = await getPage(params); return createMetadata({ page, params, }); } ``` 或者您可以手动构建它: ```tsx title="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` 字段传递它。 ```tsx title="page.tsx" import { DocsPage } from 'fumadocs-ui/page'; import { getToc } from 'fumadocs-core'; export default function Page() { const toc = getToc(content); return ; } ``` {/* */} ### 自定义内容目录 可以定制 TOC(目录)的呈现方式,但您仍然需要通过 `toc` 字段传递真实的 TOC 项目。 ```tsx title="page.tsx" import { DocsPage } from 'fumadocs-ui/page'; export default function Page() { return (
Custom TOC
); } ``` ## 最后更新时间 ```tsx title="page.tsx" import { DocsPage } from 'fumadocs-ui/page'; export default function Page() { return ; } ``` ## 页脚 ```tsx title="layout.tsx" import { DocsPage } from 'fumadocs-ui/page'; import { baseOptions } from '@/app/layout.config'; export default function Page() { return ( ); } ``` ### 使用基础配置 您可以创建一个 `baseOptions` 对象,用于所有页面和布局组件。 ```tsx title="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', }, }; ``` ```tsx title="page.tsx" import { DocsPage } from 'fumadocs-ui/page'; import { baseOptions } from '@/app/layout.config'; export default function Page() { return ; } ``` ### 编辑链接 ```tsx import { DocsPage } from 'fumadocs-ui/page'; export default function Page() { return ( ); } ``` ### 页面导航 ```tsx 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 ( ); } ``` #### 自定义获取相邻页面 您可以在 `createAdjacentPages` 方法中应用 `includeInPageNav` 过滤器,该方法由文档生成器创建: ```tsx title="api.ts" import { createAdjacentPages } from 'fumadocs-core/docs'; import { tree } from '@/app/source'; export const getAdjacentPages = createAdjacentPages(tree, { includeInPageNav: (page) => !page.data.preview, }); ```