主题封面生成

为分享页主题选择界面(/dashboard/theme)生成各主题的展示封面图片。

项说明
脚本scripts/gen_theme_cover.mjs(唯一入口)
输出public/t_image/<主题id>_min.png
原理Node 里拼 SVG → 用 sharp 栅格化为 PNG

由于封面与页面使用同一套图标路径、渐变与配色,所以能做到"封面即页面观感"。

历史背景

最初每个主题各写一份生成脚本(gen_grid_cover.mjs / gen_netdisk_cover.mjs),现已合并为统一脚本 —— 通用引擎(CLI + 输出管线 + 字体常量)+ 按主题注册的配方函数。 新增主题封面只需在脚本的 RECIPES 里注册一条配方,不用新建文件。 ::

快速使用

# 生成单个主题封面(默认输出 public/t_image/<id>_min.png)
node scripts/gen_theme_cover.mjs grid
node scripts/gen_theme_cover.mjs netdisk

# 生成全部主题封面
node scripts/gen_theme_cover.mjs all

# 自定义输出路径(仅单个主题时可用,调试常用)
node scripts/gen_theme_cover.mjs grid --out /tmp/grid.png

常用参数

参数说明
<主题id>生成指定主题的封面
all生成全部已注册主题的封面
--list列出所有已注册的主题 id
--out <路径>自定义输出路径(仅单个主题)
--svg只输出 SVG 源文件(不栅格化,便于调试)

新增一个主题封面

  1. 在 scripts/gen_theme_cover.mjs 的 RECIPES 中注册一条配方(提供配色、图标与布局参数);
  2. 运行 node scripts/gen_theme_cover.mjs <新主题id> 生成封面;
  3. 提交生成的 public/t_image/<id>_min.png。
需要中文字体

脚本渲染含中文文本的 SVG 时依赖系统 CJK 字体;缺少字体会出现方框或空白。 容器/CI 环境下请先安装中文字体包。 ::

为什么要"栅格化"

SVG 虽然体积小、可缩放,但在主题选择页中会被用作 <img> 封面并参与大量与缩放相关的布局计算。 栅格化为 PNG 后:

  • 浏览器无需为每个封面解析 SVG 文本;
  • 避免了不同浏览器 SVG 字体回退差异导致的封面显示不一致;
  • 生成时间在构建链路之外,由人工按需触发,不影响运行时性能。

相关