Takumi

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

インストール

npm install takumi-js

メタデータ画像

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

export const docsImageRoute = '/og/docs';

export function getPageImagePath(slugs: string[], locale?: string) {
  return (
    '/' + [locale, ...docsImageRoute.split('/'), ...slugs, 'image.webp'].filter(Boolean).join('/')
  );
}

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

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

import { source } from '@/lib/source';
import { generateOGImage } from 'fumadocs-ui/og/takumi';
import type { Route } from './+types/docs.og';

export function loader({ params }: Route.LoaderArgs) {
  const slugs = params['*']
    .split('/')
    .filter((v) => v.length > 0)
    .slice(0, -1);
  const page = source.getPage(slugs);

  if (!page) throw new Response(undefined, { status: 404 });

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

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

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

その他のテンプレート

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

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

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

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

このページの内容

インストール

メタデータ画像

その他のテンプレート