Next.js

请确保阅读他们的元数据部分以了解 Metadata API 的基础知识。

元数据图像

Fumadocs 内置了元数据图像生成器。

要开始使用，您需要一个路由处理程序。

app/docs-og/[...slug]/route.tsx

import { generateOGImage } from 'fumadocs-ui/og';
import { source } from '@/lib/source';
import { notFound } from 'next/navigation';

export async function GET(
  _req: Request,
  { params }: RouteContext<'/docs-og/[...slug]'>,
) {
  const { slug } = await params;
  const page = source.getPage(slug.slice(0, -1));
  if (!page) notFound();

  return generateOGImage({
    title: page.data.title,
    description: page.data.description,
    site: 'My App',
  });
}

export function generateStaticParams() {
  return source.generateParams().map((page) => ({
    ...page,
    slug: [...page.slug, 'image.png'],
  }));
}

我们需要在 slugs 的末尾附加 image.png，以便可以通过 /docs-og/my-page/image.png 访问它。

在您的文档页面中，将图像添加到元数据中。

app/docs/[[...slug]]/page.tsx

import { notFound } from 'next/navigation';
import { source } from '@/lib/source';

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

  const image = ['/docs-og', ...slug, 'image.png'].join('/');
  return {
    title: page.data.title,
    description: page.data.description,
    openGraph: {
      images: image,
    },
    twitter: {
      card: 'summary_large_image',
      images: image,
    },
  };
}

其他预设

Fumadocs CLI 上有其他可用的样式，例如 mono：

npx @fumadocs/cli@latest add og/mono

用安装的那个替换您旧的 generateOGImage。

自定义

您可以为 Satori 指定选项，例如添加字体：

import { generateOGImage } from 'fumadocs-ui/og';

generateOGImage({
  fonts: [
    {
      name: 'Roboto',
      // Use `fs` (Node.js only) or `fetch` to read the font as Buffer/ArrayBuffer and provide `data` here.
      data: robotoArrayBuffer,
      weight: 400,
      style: 'normal',
    },
  ],
});

元数据图像

其他预设

自定义

On this page