AstroPaper v1.4.0 的新功能，为博客文章引入动态 OG 图片生成。
目录
介绍
OG 图片（也称为社交图片）在社交媒体互动中扮演着重要角色。如果你不知道 OG 图片的含义，它是指我们在社交媒体（如 Facebook、Discord 等）上分享网站 URL 时显示的图片。
Twitter 使用的社交图片在技术上并不叫 OG 图片。不过，在本文中，我将统一使用 OG 图片这一术语来指代所有类型的社交图片。
默认/静态 OG 图片（旧方式）
AstroPaper 已经提供了一种为博客文章添加 OG 图片的方法。作者可以在 frontmatter 的 ogImage 中指定 OG 图片。即使作者没有在 frontmatter 中定义 OG 图片，默认的 OG 图片也会被用作后备图片（在本例中为 public/astropaper-og.jpg）。但问题在于，默认的 OG 图片是静态的，这意味着每篇未在 frontmatter 中包含 OG 图片的博客文章将始终使用相同的默认 OG 图片，尽管每篇文章的标题/内容各不相同。
动态 OG 图片
为每篇文章生成动态 OG 图片，使作者无需为每一篇博客文章指定 OG 图片。此外，这还能避免后备 OG 图片对所有博客文章都千篇一律的问题。
在 AstroPaper v1.4.0 中，使用 Vercel 的 Satori 包来实现动态 OG 图片生成。
动态 OG 图片将在构建时为满足以下条件的博客文章生成：
- 未在 frontmatter 中包含 OG 图片
- 未被标记为草稿。
AstroPaper 动态 OG 图片的结构
AstroPaper 的动态 OG 图片包含_博客文章标题_、作者名称_和_站点标题。作者名称和站点标题将通过 “src/config.ts” 文件中的 SITE.author 和 SITE.title 获取。标题从博客文章 frontmatter 的 title 生成。
非拉丁字符问题
含有非拉丁字符的标题默认情况下无法正常显示。要解决这个问题，我们需要将 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 分钟。随着内容规模的增长，这可能显著影响构建时间。
相关问题：#428
局限性
在撰写本文时，Satori 还比较新，尚未达到主要版本发布阶段。因此，此动态 OG 图片功能仍存在一些局限性。
- RTL 语言尚未支持。
- 在标题中使用表情符号可能有些棘手。