Skip to content

feat: add OpenGraph image generation support - #600

Closed
EveSunMaple wants to merge 8 commits into
saicaca:mainfrom
EveSunMaple:main
Closed

feat: add OpenGraph image generation support#600
EveSunMaple wants to merge 8 commits into
saicaca:mainfrom
EveSunMaple:main

Conversation

@EveSunMaple

@EveSunMaple EveSunMaple commented Aug 16, 2025

Copy link
Copy Markdown
Contributor

Type of change

  • Bug fix (a non-breaking change that fixes an issue)
  • New feature (a non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Other (please describe):

Checklist

Related Issue

我发现有一个相关的 PR #80

但是它并没有被合并,当前的仓库版本也并没有在 Layout 配置 og:image

Changes

新增了 Open Graph (OG) 图片自动生成功能,为每篇文章在构建时生成一张独特的社交媒体分享图。此功能深度契合 Fuwari 主题的视觉风格,并提供高度可配置性。

主要更新包括:

  • 动态主题化:图片的主色调与背景色会根据 siteConfig 中的 themeColor.hue 自动调整,与网站主题保持视觉统一。
  • 内容丰富:生成的图片包含站点图标、站点标题、文章标题、文章描述(最多两行)、作者头像与名称以及发布日期。
  • 可开关控制:在 siteConfig 中新增 generateOgImages 选项,用户可以方便地在 src/config.ts 中启用或禁用此功能,以在不需要时加快构建速度。
  • 自动集成:已修改 src/layouts/Layout.astro,为文章页自动添加正确的 <meta property="og:image" ...> 标签,并为非文章页面提供备选的默认分享图。

How To Test

  1. 确保 src/config.ts 文件中的 generateOgImages 选项为 true
  2. 运行构建命令(如 pnpm build)。
  3. 检查输出目录(默认为 dist/)下是否存在 og/ 文件夹及生成的 .png 图片。
  4. 打开任意一张生成的图片,检查其样式、颜色和内容是否符合预期。
  5. 检查构建后的文章 HTML 文件,确认 <head> 中已正确添加 <meta property="og:image" ...> 标签,且其 content 指向正确的图片绝对路径 URL。
  6. generateOgImages 设为 false 并重新构建,确认 dist/ 目录下不再生成 og/ 文件夹。

Screenshots (if applicable)

  • 一行标题、默认样式演示:
    image
  • 两行标题、默认样式演示:
    image
  • 一行标题、修改色相演示:
    image
  • 自定义图标与站点演示:
    image

Additional Notes

  • 此功能引入了 satori ,用于在服务端生成图片。
  • 使用者需要在其文章布局或页面文件(如 src/pages/posts/[slug].astro)中,向 Layout.astro 组件传递 postSlug 属性,以正确链接到生成的图片(此部分已经修改)。

@vercel

vercel Bot commented Aug 16, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
fuwari-yags Ready Ready Preview Comment Aug 23, 2025 2:03pm

@EveSunMaple

EveSunMaple commented Aug 16, 2025

Copy link
Copy Markdown
Contributor Author

请求检查 @L4Ph

本地 pnpm buildpnpm check 均已通过,但 Github Check 没有通过。

image

上图报错在我本地修改时曾经出现过一次(因为打开那个文件),关闭后又回复正常。Vercel 部署无误,请问这是什么问题?


此修改需要额外附加字体文件,不知道能否接受?

@EveSunMaple

Copy link
Copy Markdown
Contributor Author

我已经使用 biome 正确格式化了代码,现在可以通过检查了。

同时,我已经改成通过网络请求字体,不需要在仓库中额外添加字体文件。

Xeonzilla pushed a commit to Xeonzilla/astro-blog that referenced this pull request Sep 23, 2025
style: format code and fix indentation

fix: simplify favicon selection logic

style: format code and fix indentation

refactor: load fonts from google fonts dynamically

refactor: improve font loading and type definitions

Reference: [Upstream#600](saicaca/fuwari#600)
Xeonzilla pushed a commit to Xeonzilla/astro-blog that referenced this pull request Sep 24, 2025
style: format code and fix indentation

fix: simplify favicon selection logic

style: format code and fix indentation

refactor: load fonts from google fonts dynamically

refactor: improve font loading and type definitions

Reference: [Upstream#600](/saicaca/fuwari/pull/600)
@EveSunMaple EveSunMaple closed this by deleting the head repository Dec 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant