【转载】AstroPaper 博客文章动态 OG 图片生成

AstroPaper v1.4.0 的新功能：博客文章动态 OG 图片生成。

Table of contents

简介

OG 图片（即社交图片）在社交媒体分享中扮演着重要角色。如果你不知道什么是 OG 图片，它就是当你在 Facebook、Discord 等社交媒体上分享网站 URL 时所显示的那张图片。

Twitter 使用的社交图片严格来说并不叫 OG 图片。不过在这篇文章中，我会用”OG 图片”这个术语来指代所有类型的社交图片。

默认/静态 OG 图片（旧方案）

AstroPaper 已经提供了一种为博客文章添加 OG 图片的方法。作者可以在 frontmatter 中通过 ogImage 字段指定 OG 图片。即使作者没有在 frontmatter 中定义 OG 图片，系统也会使用默认 OG 图片作为兜底方案（此时为 public/default-og.jpg）。但问题在于，默认 OG 图片是静态的，这意味着所有未在 frontmatter 中包含 OG 图片的博客文章都会使用同一张默认图片，尽管每篇文章的标题和内容各有不同。

动态 OG 图片

为每篇文章生成动态 OG 图片，可以让作者无需为每篇博客文章单独指定 OG 图片。同时也能避免兜底图片与所有博客文章千篇一律的问题。

在 AstroPaper v1.4.0 中，使用了 Vercel 的 Satori 包来生成动态 OG 图片。

在 AstroPaper v6 及以上版本中，核心思路不变（Satori 将 SVG 渲染为图片，再通过 Sharp 生成 PNG），但字体改为从 Astro 的 Fonts 配置中获取，并通过 experimental_getFontFileURL() 加载，从而使 OG 生成可以复用网站相同的字体管道。

动态 OG 图片会在构建时为符合条件的博客文章生成，具体条件为：

• frontmatter 中未包含 OG 图片
• 未被标记为草稿（draft）。

AstroPaper 动态 OG 图片的组成

动态 OG 图片包含：博客文章标题、作者名称 和 网站标题。作者名称和网站标题分别从 astro-paper.config.ts 中的 site.author 和 site.title 获取，标题则从博客文章 frontmatter 的 title 字段生成。

非拉丁字符的问题

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  fonts: [
    {
      // Example: Japanese coverage (pick what you need for your audience)
      name: "Noto Sans JP",
      cssVariable: "--font-google-sans-code",
      provider: fontProviders.google(),
      fallbacks: ["monospace"],
      weights: [400, 700],
      styles: ["normal", "italic"],
      formats: ["woff", "ttf"],
    },
  ],
});astro.config.ts

如果修改了 cssVariable，还需同步更新以下文件中的对应键：

• src/pages/og.png.ts
• src/pages/posts/[...slug]/index.png.ts

更多详情可参阅 此 PR。