Takumi

Takumi を統合して、フレームワークに依存しない高速なメタデータ画像生成を実現します。

インストール

npm install takumi-js

メタデータ画像

ページの画像 URL を返す関数を追加し、ドキュメントページのメタデータからその画像を参照します。

import { createGetUrl } from 'fumadocs-core/source';

const getImageUrl = createGetUrl('/og/docs');

export function getPageImageUrl(page: { slugs: string[]; locale?: string }) {
  const segments = [...page.slugs, 'image.webp'];

  return { segments, url: getImageUrl(segments, page.locale) };
}

---
import Layout from '@/layouts/Layout.astro';
import { getPageImageUrl } from '@/lib/shared';
---

<Layout
  title={page.data.title}
  description={page.data.description}
  image={getPageImageUrl(page).url}
>
  {/* ... */}
</Layout>

/docs/my-page の画像は /og/docs/my-page/image.webp に配置されます。WebP 画像は PNG 画像よりもファイルサイズが小さいためです。PNG を生成したい場合は、代わりに image.png と format: 'png' を使用してください。

次に、画像を生成するルートを作成します。

src/pages/og/docs/[...slug]/image.webp.ts

import type { APIRoute, GetStaticPaths, InferGetStaticPropsType } from 'astro';
import { generateOGImage } from 'fumadocs-ui/og/takumi';
import { source } from '@/lib/source';
import { appName } from '@/lib/shared';

export const prerender = true;

export const getStaticPaths = (() => {
  return source.getPages().map((page) => ({
    params: { slug: decodeURI(page.slugs.join('/')) || undefined },
    props: { page },
  }));
}) satisfies GetStaticPaths;

export const GET: APIRoute<InferGetStaticPropsType<typeof getStaticPaths>> = ({
  props: { page },
}) => {
  return generateOGImage({
    title: page.data.title,
    description: page.data.description,
    site: appName,
    format: 'webp',
  });
};

Takumi には全ウェイト (100-900) に対応した Geist フォントと Geist Mono フォントが同梱されているため、フォントの設定は不要です。

高度な使い方については、Takumi のドキュメントを参照してください。

その他のテンプレート

利用できるテンプレートについては、Takumi Templates を参照してください。

インストールアンカーリンクをコピー

メタデータ画像アンカーリンクをコピー

その他のテンプレートアンカーリンクをコピー

このページの内容

インストール

メタデータ画像

その他のテンプレート