用途:为 Next.js 应用生成动态社交分享预览图,包括 OpenGraph(1200×630,用于 Facebook、LinkedIn、iMessage 等)和 Twitter/X 卡片(1200×600)图像,基于 next/og 的 ImageResponse 实现。
主要能力:可使用渐变背景、发光光球、渐变文字、带渐变的 SVG 图标、标签徽章与底部渐变装饰等设计模式;按栏目类型提供了配色参考(如首页蓝紫青、About 绿青、Projects 橙琥珀、Writing 粉紫等)。
使用方式:在路由目录下创建 opengraph-image.tsx 或 twitter-image.tsx,导出 runtime、alt、size、contentType 及默认异步 Image 组件,在组件中返回 new ImageResponse(...) 并传入尺寸;构建后可通过 bun run build(或 npm run build)验证路由是否注册为动态。
限制与规则:每个元素都需加 display: "flex"(Satori 要求),仅用内联样式,不使用 CSS 类或外部样式表;文本需包裹在有明确样式的元素中;SVG 需使用 viewBox 与显式尺寸,filter 只能放在 SVG 根节点;颜色使用十六进制而非 CSS 变量;渐变文字需同时设置 backgroundClip: "text" 与 color: "transparent"。
适用场景:需要为 Next.js 站点各路由生成统一风格社交分享图的开发者。收费、价格、平台支持范围及效果数据暂未提供。