博客封面生成器

把一套固定的封面配方生成为 public/blog/covers/<slug>.png。所有语言共用同一张英文封面;上线后不再改。

交互式生成(读文章 → 选图标/关键词 → 预览挑选 → 出图 → 回填 frontmatter)走 blog-cover skill(.claude/skills/blog-cover/)。本目录是它调用的底层。

用法

图标模式(1–3 个图标 + 关键词):

node scripts/cover/renderCover.mjs \
  --category product-updates --icons language,table \
  --keyword "Web to Sheets" --slug colbot-web-clipper-launch

纯文字模式(无图标、可折行的较长标题,用于短词说不清时):

node scripts/cover/renderCover.mjs \
  --category product-updates \
  --text "Extract any web page|into Google Sheets" --slug my-post

可选:--scale <n>(设备像素比,默认 1 → 标准 1200×630;--scale 2 出 2× 的 2400×1260 更清晰);环境变量 CHROME 覆盖 Chrome 路径。

生成后在文章 frontmatter 写 cover: /blog/covers/<slug>.png(中文/其它语言指向同一路径)。

固定风格(改这些改 coverConfig.js)

• 深色分类实底 + 反色 Colbot logo + 分类名 lockup(左上)+ 白字。
• 中央主体整画布垂直居中:图标横向一排(1 居中 / 2、3 展开,间距一致)+ 下方关键词;或纯文字折行。
• 分类底色 CATEGORY_BG(key 对齐 blog/_data/categories.js):product-updates 绿 / tutorials 蓝 / case-studies 琥珀。
• 约束:关键词 ≤16 字符单行;文字模式 ≤3 行、每行 ≤24;图标 ≤3;违反即报错不出图。

文件

文件	职责
coverConfig.js	配色 + 版式常量 + logo path(单一真相源)
icons.js	Material Symbols 图标 path 表 + 新增图标流程
buildCoverSvg.js	纯函数:参数 → 1200×630 SVG(含校验)
renderCover.mjs	CLI:SVG → 内嵌字体 HTML → 无头 Chrome 截图 → PNG
fonts/	IBM Plex Mono 600/700 woff2(base64 内嵌,渲染字体保真)

加图标 / 加分类

• 加图标:见 icons.js 顶部注释(从官方 Material Symbols 仓库 curl 取 path)。
• 加分类色:在 coverConfig.js 的 CATEGORY_BG 加一项(key = categories.js 的 slug,值为字面 hex)。

依赖

• 无头 Chrome(mac 默认路径,或 CHROME 环境变量)。字体已内嵌,渲染不需要联网。