AstroPaper v1.4.0 新特性，引入了博客文章的动态 OG 图片生成功能。该功能允许作者为每篇博客文章生成唯一的 OG 图片，而无需为每篇文章指定 OG 图片。
简介
OG 图片（又称社交图片）在社交媒体互动中起着重要作用。如果你不知道 OG 图片是什么意思，它就是我们在 Facebook、Discord 等社交媒体上分享网站 URL 时显示的图片。
推特使用的社交图片技术上不称为 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 语言。
- 在标题中使用表情符号可能会有点棘手。