博客文章中的动态 OG 图片生成

AstroPaper v1.4.0 的新功能，为博客文章引入了动态 OG 图片生成。

简介

OG 图片（又称社交图片）在社交媒体互动中扮演着重要角色。如果你不知道 OG 图片是什么意思，它就是我们在 Facebook、Discord 等社交媒体上分享网站 URL 时显示的图片。

用于 Twitter 的社交图片在技术上并不叫 OG 图片。不过，在这篇文章中，我将用 OG 图片这个术语来指代所有类型的社交图片。

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

AstroPaper 已经提供了一种向博客文章添加 OG 图片的方法。作者可以在前言 ogImage 中指定 OG 图片。即使作者没有在前言中定义 OG 图片，也会使用默认 OG 图片作为后备（在本例中为 public/astropaper-og.jpg）。但问题在于默认 OG 图片是静态的，这意味着前言中未包含 OG 图片的每篇博客文章都将始终使用相同的默认 OG 图片，尽管每篇文章的标题/内容各不相同。

动态 OG 图片

为每篇文章生成动态 OG 图片允许作者避免为每篇博客文章指定 OG 图片。此外，这还可以防止后备 OG 图片在所有博客文章中千篇一律。在 AstroPaper v1.4.0 中，使用 Vercel 的 Satori 包进行动态 OG 图片生成。动态 OG 图片将在构建时为以下博客文章生成：

前言中不包含 OG 图片
未标记为草稿

AstroPaper 动态 OG 图片解析

AstroPaper 的动态 OG 图片包括博客文章标题、作者姓名和站点标题。作者姓名和站点标题将通过 “src/config.ts” 文件的 SITE.author 和 SITE.title 获取。标题由博客文章前言中的 title 生成。动态 OG 图片示例链接

问题：非拉丁字符

包含非拉丁字符的标题无法开箱即用地正确显示。要解决此问题，我们必须用你首选的字体替换 loadGoogleFont.ts 中的 fontsConfig。

async function loadGoogleFonts(
  text: string
): Promise<
  Array<{ name: string; data: ArrayBuffer; weight: number; style: string }>
> {
  const fontsConfig = [
    {
      name: "Noto Sans JP",
      font: "Noto+Sans+JP",
      weight: 400,
      style: "normal",
    },
    {
      name: "Noto Sans JP",
      font: "Noto+Sans+JP:wght@700",
      weight: 700,
      style: "normal",
    },
    { name: "Noto Sans", font: "Noto+Sans", weight: 400, style: "normal" },
    {
      name: "Noto Sans",
      font: "Noto+Sans:wght@700",
      weight: 700,
      style: "normal",
    },
  ];
  // ...
}src/utils/loadGoogleFont.ts

查看此 PR 了解更多信息。

权衡

虽然这是一个不错的功能，但也存在权衡。生成每张 OG 图片大约需要一秒钟。起初这可能不明显，但随着博客文章数量的增长，你可能想要禁用此功能。

由于每张 OG 图片都需要时间生成，拥有大量图片将线性增加构建时间。

例如：如果一张 OG 图片需要一秒钟生成，那么 60 张图片大约需要一分钟，600 张图片大约需要 10 分钟。随着内容规模的扩大，这会显著影响构建时间。

局限性

在撰写本文时，Satori 还相当新，尚未发布主要版本。因此，此动态 OG 图片功能仍存在一些局限性。

此外，尚不支持 RTL（从右向左）语言。
在标题中使用 emoji 可能有点棘手。

博客文章中的动态 OG 图片生成

目录

简介

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

动态 OG 图片

AstroPaper 动态 OG 图片解析

问题：非拉丁字符

权衡

局限性