Takumi

安裝

npm install takumi-js

takumi-js 在 Node.js 上會載入原生綁定 (@takumi-rs/core) 。請將它標記為外部套件，避免被打包進伺服器 bundle：

next.config.ts

import type { NextConfig } from 'next';

const config: NextConfig = {
  serverExternalPackages: ['@takumi-rs/core'],
};

中繼資料圖片

新增一個回傳頁面圖片 URL 的函式，並在文件頁面的中繼資料中引用該圖片：

export function getPageImageUrl(page: (typeof source)['$inferPage']) {
  const segments = [...page.slugs, 'image.webp'];

  return {
    segments,
    url: '/' + [page.locale, 'og', 'docs', ...segments].filter(Boolean).join('/'),
  };
}

/docs/my-page 的圖片位於 /og/docs/my-page/image.webp，因為 WebP 圖片的檔案比 PNG 小。若要產生 PNG，請改用 image.png 與 format: 'png'。

接著建立用來產生圖片的路由：

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

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

export const revalidate = false;

export async function GET(_req: Request, { params }: RouteContext<'/og/docs/[...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',
    format: 'webp',
  });
}

export function generateStaticParams() {
  return source.getPages().map((page) => ({
    lang: page.locale,
    slug: getPageImageUrl(page).segments,
  }));
}

Takumi 已內建完整字重軸 (100-900) 的 Geist 與 Geist Mono 字型，無須另外設定字型。

進階用法請參閱 Takumi 官方文件。

其他範本

可用的範本請參閱 Takumi 範本。

安裝複製錨點連結

中繼資料圖片複製錨點連結

其他範本複製錨點連結

本頁目錄

安裝

中繼資料圖片

其他範本