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 範本。

安裝複製錨點連結

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

其他範本複製錨點連結

本頁目錄

安裝

中繼資料圖片

其他範本