[{"data":1,"prerenderedAt":373},["ShallowReactive",2],{"docs:/docs/dev/theme-cover":3},{"id":4,"title":5,"body":6,"description":366,"extension":367,"meta":368,"navigation":161,"path":369,"seo":370,"stem":371,"__hash__":372},"docs/docs/dev/theme-cover.md","主题封面生成",{"type":7,"value":8,"toc":359},"minimark",[9,12,21,79,86,355],[10,11,5],"h1",{"id":5},[13,14,15,16,20],"p",{},"为分享页主题选择界面（",[17,18,19],"code",{},"/dashboard/theme","）生成各主题的展示封面图片。",[22,23,24,37],"table",{},[25,26,27],"thead",{},[28,29,30,34],"tr",{},[31,32,33],"th",{},"项",[31,35,36],{},"说明",[38,39,40,57,67],"tbody",{},[28,41,42,46],{},[43,44,45],"td",{},"脚本",[43,47,48,51,52,56],{},[17,49,50],{},"scripts/gen_theme_cover.mjs","（",[53,54,55],"strong",{},"唯一入口","）",[28,58,59,62],{},[43,60,61],{},"输出",[43,63,64],{},[17,65,66],{},"public/t_image/\u003C主题id>_min.png",[28,68,69,72],{},[43,70,71],{},"原理",[43,73,74,75,78],{},"Node 里拼 SVG → 用 ",[17,76,77],{},"sharp"," 栅格化为 PNG",[13,80,81,82,85],{},"由于封面与页面使用",[53,83,84],{},"同一套图标路径、渐变与配色","，所以能做到\"封面即页面观感\"。",[87,88,91,110,114,207,210,273,276,303],"callout",{"title":89,"type":90},"历史背景","note",[13,92,93,94,97,98,101,102,105,106,109],{},"最初每个主题各写一份生成脚本（",[17,95,96],{},"gen_grid_cover.mjs"," / ",[17,99,100],{},"gen_netdisk_cover.mjs","），现已合并为统一脚本 ——\n",[53,103,104],{},"通用引擎（CLI + 输出管线 + 字体常量）＋ 按主题注册的配方函数","。\n新增主题封面只需在脚本的 ",[17,107,108],{},"RECIPES"," 里注册一条配方，不用新建文件。\n::",[111,112,113],"h2",{"id":113},"快速使用",[115,116,121],"pre",{"className":117,"code":118,"language":119,"meta":120,"style":120},"language-sh shiki shiki-themes github-dark","# 生成单个主题封面（默认输出 public/t_image/\u003Cid>_min.png）\nnode scripts/gen_theme_cover.mjs grid\nnode scripts/gen_theme_cover.mjs netdisk\n\n# 生成全部主题封面\nnode scripts/gen_theme_cover.mjs all\n\n# 自定义输出路径（仅单个主题时可用，调试常用）\nnode scripts/gen_theme_cover.mjs grid --out /tmp/grid.png\n","sh","",[17,122,123,132,146,156,163,169,179,184,190],{"__ignoreMap":120},[124,125,128],"span",{"class":126,"line":127},"line",1,[124,129,131],{"class":130},"sAwPA","# 生成单个主题封面（默认输出 public/t_image/\u003Cid>_min.png）\n",[124,133,135,139,143],{"class":126,"line":134},2,[124,136,138],{"class":137},"svObZ","node",[124,140,142],{"class":141},"sU2Wk"," scripts/gen_theme_cover.mjs",[124,144,145],{"class":141}," grid\n",[124,147,149,151,153],{"class":126,"line":148},3,[124,150,138],{"class":137},[124,152,142],{"class":141},[124,154,155],{"class":141}," netdisk\n",[124,157,159],{"class":126,"line":158},4,[124,160,162],{"emptyLinePlaceholder":161},true,"\n",[124,164,166],{"class":126,"line":165},5,[124,167,168],{"class":130},"# 生成全部主题封面\n",[124,170,172,174,176],{"class":126,"line":171},6,[124,173,138],{"class":137},[124,175,142],{"class":141},[124,177,178],{"class":141}," all\n",[124,180,182],{"class":126,"line":181},7,[124,183,162],{"emptyLinePlaceholder":161},[124,185,187],{"class":126,"line":186},8,[124,188,189],{"class":130},"# 自定义输出路径（仅单个主题时可用，调试常用）\n",[124,191,193,195,197,200,204],{"class":126,"line":192},9,[124,194,138],{"class":137},[124,196,142],{"class":141},[124,198,199],{"class":141}," grid",[124,201,203],{"class":202},"sDLfK"," --out",[124,205,206],{"class":141}," /tmp/grid.png\n",[111,208,209],{"id":209},"常用参数",[22,211,212,221],{},[25,213,214],{},[28,215,216,219],{},[31,217,218],{},"参数",[31,220,36],{},[38,222,223,233,243,253,263],{},[28,224,225,230],{},[43,226,227],{},[17,228,229],{},"\u003C主题id>",[43,231,232],{},"生成指定主题的封面",[28,234,235,240],{},[43,236,237],{},[17,238,239],{},"all",[43,241,242],{},"生成全部已注册主题的封面",[28,244,245,250],{},[43,246,247],{},[17,248,249],{},"--list",[43,251,252],{},"列出所有已注册的主题 id",[28,254,255,260],{},[43,256,257],{},[17,258,259],{},"--out \u003C路径>",[43,261,262],{},"自定义输出路径（仅单个主题）",[28,264,265,270],{},[43,266,267],{},[17,268,269],{},"--svg",[43,271,272],{},"只输出 SVG 源文件（不栅格化，便于调试）",[111,274,275],{"id":275},"新增一个主题封面",[277,278,279,289,296],"ol",{},[280,281,282,283,285,286,288],"li",{},"在 ",[17,284,50],{}," 的 ",[17,287,108],{}," 中注册一条配方（提供配色、图标与布局参数）；",[280,290,291,292,295],{},"运行 ",[17,293,294],{},"node scripts/gen_theme_cover.mjs \u003C新主题id>"," 生成封面；",[280,297,298,299,302],{},"提交生成的 ",[17,300,301],{},"public/t_image/\u003Cid>_min.png","。",[87,304,307,310,314,321,337,340],{"title":305,"type":306},"需要中文字体","warning",[13,308,309],{},"脚本渲染含中文文本的 SVG 时依赖系统 CJK 字体；缺少字体会出现方框或空白。\n容器/CI 环境下请先安装中文字体包。\n::",[111,311,313],{"id":312},"为什么要栅格化","为什么要\"栅格化\"",[13,315,316,317,320],{},"SVG 虽然体积小、可缩放，但在主题选择页中会被用作 ",[17,318,319],{},"\u003Cimg>"," 封面并参与大量与缩放相关的布局计算。\n栅格化为 PNG 后：",[322,323,324,327,334],"ul",{},[280,325,326],{},"浏览器无需为每个封面解析 SVG 文本；",[280,328,329,330,333],{},"避免了不同浏览器 SVG 字体回退差异导致的",[53,331,332],{},"封面显示不一致","；",[280,335,336],{},"生成时间在构建链路之外，由人工按需触发，不影响运行时性能。",[111,338,339],{"id":339},"相关",[322,341,342,349],{},[280,343,344],{},[345,346,348],"a",{"href":347},"/docs/dev","开发文档首页",[280,350,351],{},[345,352,354],{"href":353},"/docs/dev/deploy","打包与部署",[356,357,358],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":120,"searchDepth":148,"depth":148,"links":360},[361,362,363,364,365],{"id":113,"depth":134,"text":113},{"id":209,"depth":134,"text":209},{"id":275,"depth":134,"text":275},{"id":312,"depth":134,"text":313},{"id":339,"depth":134,"text":339},"分享页主题封面统一生成脚本 gen_theme_cover.mjs 的用法：SVG → sharp 栅格化，新增主题只需注册配方。","md",{},"/docs/dev/theme-cover",{"title":5,"description":366},"docs/dev/theme-cover","F5kLmP_gDfDlV1xLGNUGsZLTG3Zr_0qwChfu-W_gbcM",1792518096651]