Lobsters | 📄 原文链接 | 2026-11-11 收录

用 Typst 在构建时生成为文章配图

来源：eaj.no — 2026-11-09

📋 概述

作者把「去图库搜一张差不多的配图」的旧流程换掉，改成在构建时用 Typst 渲染 1200×630 的卡片图，通过 og:image 元标签挂到每篇文章上。Typst 的 CLI 支持 --format png 与 --input key=value，模板里用 sys.inputs 读标题，标题超过 70 字符就自动缩到 60pt。在 Astro 里只需写一个 [id]/og.png.ts 的 API 路由，用 getStaticPaths 枚举所有文章、execFile 调用 typst 并把 stdout 当作 image/png 返回，构建产物里就多出每篇文章的 PNG。图片缓存则用模板与标题的 sha256 前 10 位做查询参数解决。

🔑 核心要点

Typst 可以 typst compile --format png --ppi 144 直接出图，模板通过 sys.inputs 拿 --input 传进来的标题
标题长度自适应：超过 70 字符用 60pt，否则 72pt，避免长标题溢出卡片
Astro 里 src/pages/posts/[id]/og.png.ts 就是一个返回 image/png 的静态 API 路由
分享平台会长期缓存配图，所以用模板与标题的 sha256 前 10 位做 query 参数破缓存
只有内容真的变化时缓存键才变，不会每次构建都强制所有平台重新抓图

💡 金句

去图库搜「结构」或「档案」的照片既无聊又容易出错，于是我把这套流程扔掉，改成在构建时生成图片卡片。

← 返回 Lobsters 首页