在 AstroPaper 部落格文章中生成動態 OG 圖片

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。

// 文件: loadGoogleFont.ts

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",
    },
  ];
  // 其他代碼
}

查看 這個 PR 以獲取更多信息。

限制

在撰寫本文時，Satori 還相當新，尚未達到主要版本。因此，這個動態 OG 圖片功能仍然有一些限制。

• 此外，尚不支持 RTL 語言。
• 在標題中 使用表情符號 可能有點棘手。