# Fumadocs (Framework Mode, Waku): Takumi
URL: /zh-TW/docs/waku/integrations/og/takumi
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/integrations/og/takumi.zh-TW.mdx

整合 Takumi，快速產生中繼資料圖片，且不受框架限制。

## 安裝 [#installation]

```npm
npm install takumi-js
```

## 中繼資料圖片 [#metadata-image]

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

```ts tab="src/lib/shared.ts"
import { createGetUrl } from 'fumadocs-core/source';

// [!code ++:7]
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) };
}
```

```tsx tab="src/pages/docs/[...slugs].tsx"
// [!code ++]
import { getPageImageUrl } from '@/lib/shared';

// 在您的頁面元件中的某處
return (
  <DocsPage toc={page.data.toc}>
    {/* [!code ++] */}
    <meta property="og:image" content={getPageImageUrl(page).url} />
    {/* ... */}
  </DocsPage>
);
```

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

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

```tsx title="src/pages/_api/og/docs/[...slugs]/image.webp.tsx"
import { source } from '@/lib/source';
import { generateOGImage } from 'fumadocs-ui/og/takumi';
import { ApiContext } from 'waku/router';

export async function GET(_: Request, { params }: ApiContext<'/og/docs/[...slugs]/image.webp'>) {
  const page = source.getPage(params.slugs);

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

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

export async function getConfig() {
  const pages = source
    .generateParams()
    .map((item) => (item.lang ? [item.lang, ...item.slug] : item.slug));

  return {
    render: 'static' as const,
    staticPaths: pages,
  } as const;
}
```

> Takumi 已內建完整字重軸 (100-900) 的 [`Geist`](https://vercel.com/font) 與 `Geist Mono` 字型，無須另外設定字型。

進階用法請參閱 [Takumi 官方文件](https://takumi.kane.tw/docs)。

### 其他範本 [#other-templates]

可用的範本請參閱 [Takumi 範本](https://takumi.kane.tw/docs/templates)。