根因不是抠图参数:素材是白底+白车架,车架涂装与背景白是同一个值(都是 #f9f9f9), 颜色上无法分离。四角 floodfill 只吃掉外圈,轮圈内、车架三角、车筐、枪与车架之间的白整块留着, 量化就是不透明像素里近白(>240) 占 50%。 - 处置:min(r,g,b)≥238 软过渡 + 饱和度>14 保留彩色 → 白全透明。近白降到 0.0%, 不透明率 19.4%,29KB;轮辐/车架/车筐成为描边,粉轮圈、蓝枪托、接触阴影保留 - 试过「按近白厚度区分白洞与白涂装」(腐蚀测厚度)→ 失败:轮辐间扇形白楔 9~13px 与车架管 5~10px 重叠,阈值怎么调都会留白楔,比原图更难看 - 画布保持 397×259 不裁:deco-size 是 auto 259px,宽度按比例算,裁了锚点会漂 - css 图片 ?v= → 20261021a;StaticVersion 20261021c → 20261021d(css 内容变了必须换缓存键) - docs:assets-spec 补「白上白」取舍与验收项「不透明像素近白占比≈0」,theme-shiroko 素材表同步
6.4 KiB
6.4 KiB
主题(箱主个性化)(长版明细)
主题(箱主个性化)
- 三个注入点:
/_/{domain}/*→question.Pager按pageUser.Theme;/user/*→internal/contextContexter 按c.User.Theme(isThemeScope()只认/user与/user/);/vote/{token}→route/vote.Page按发布者owner.Theme。都看箱主/发布者,不看访客。全站页(/、/explore、/login)不主题化。 - 投票页语言也跟发布者:
applyOwnerLocale(data, owner)(与主题同一函数),必须在任何 i18n 取词之前调用。 - 一套主题 =
static/css/themes/<slug>.css,只覆盖令牌,不碰布局。static/fs.go已嵌整个themes/目录。 - 主题显示名:模板用
{{ themeName .LangCode .Slug }}→theme.DisplayName,i18n 没登记theme.name.<slug>时回退成 slug。⚠️ 别在模板里直接{{t .LangCode (printf "theme.name.%s" .Slug)}}:i18n.T缺词条返回 key 本身,设置页就会显示theme.name.test01(用户报过)。 - ⚠️
[theme] available是硬白名单,启动时读一次:css 发布了但没登记,设置页看不到,现象同「部署没生效」。 排查:curl /static/css/themes/<slug>.css200 = 文件在(没登记);404 = 旧二进制。 - ⚠️ 主题 css 必须成对写:
html[data-theme-style="x"](0,1,1) +html[data-theme="dark"][data-theme-style="x"](0,2,1)。TestThemeCSSComplete查两个选择器 + 10 个颜色令牌。 - ⚠️ 按页面作用域:
internal/context.pageScope()→<html data-page-scope>,取值box/question/admin(/user/questions,/user/votes*)/profile/vote。深色作用域覆盖必须三重选择器, 否则被浅色作用域块(同特异性、写在后面)盖掉。 - ⚠️ 装饰层固定 10 槽(base.css 12 层 = pattern1 + deco10 + image1),三组
--tb-deco/-size/-position必须等长。TestDecoSlotCount逐文件逐声明检查(只扫 embed 到的文件)。 - 位置一律两值
calc(0%|50%|100% ± N)(百分比相对「容器 − 图片」)。别用 left/bottom 关键字混搭: 三值语法非法时整条声明作废 → 图层静默回左上。 - 尺寸想随视口缩用
clamp,不要写死 px:auto clamp(min(calc(100vh - 24px), 231px), 46.67vh, 420px)。 内层min()是兜底 —— 屏幕小到连下限都放不下时让位给视口。宽幅素材只能按宽度缩(vw), 按高度缩的话宽度按比例涨,窄屏照样裁。 - ⚠️ UIkit 3.3.3 主色是编译期常量
#1e87f0,令牌注入不进去。base.css 末尾按组件映射(a/uk-link、 uk-button-primary、checkbox/radio、input:focus、uk-tab active、.uk-progress、.uk-label:not(...))。 - 令牌
--tb-navbar(顶栏底色,默认var(--tb-surface)):页面底色偏彩时主题必须覆盖。 - 静态资源版本号统一
conf.StaticVersion;图片不走这个缓存键(max-age=86400),换图要给 URL 带?v=。 - 整页背景
--tb-page-image(cover)/--tb-page-pattern(平铺,-size控尺寸)/--tb-page-position(焦点,默认var(--tb-page-position, center center),旧主题不写也不坏)。底色用纯色别用渐变; 图案 ≥24px、透明度 ≤0.06。 - ⚠️ 多背景层不能塞变量列表:变量自身是逗号列表会让层数与 size/position 错位。多张装饰用固定槽位。
- 装饰摆位:贴边、成组、避开页脚;四角各摆一个会读成贴纸墙纸;页脚文案右对齐 → 右下角不能放人物。
--tb-deco是 fixed 视口层,贴边插画别放进cover背景图(必裁边)。 - 主题视觉的结构比摆位重要:通行做法是「整屏场景插画 + UI 悬浮其上」(蔚蓝档案 JP)。
白底留白里摆人物,无论多大都读成贴纸;卡片/顶栏配半透明白 +
backdrop-filter才有"浮在画面上"的关系。 - 素材放
static/images/themes/<slug>/(embed 已含images/themes,子目录自动覆盖)。整页图 16:9 + 竖版两张。 - 人物素材:图生图 + 抠白底(
image1给立绘、input_fidelity: high、flat vector illustration, no outlines)。 ⚠️ 正面立绘直接贴进空场景像贴纸:改侧后方视角(不直视访客),RGB 压白 12~16% 与压白 38% 的场景对齐雾度。 - ⚠️ 抠白底容差 16:背景 253、白袜子 237 只差 16,容差 22 以上会把袜子吃穿。手内侧/两腿之间是 闭合白区,四边 floodfill 进不去,得按连通域单独掏(面积 ≥24),再 1px 收边。
- ⚠️
ruleBody取令牌前要剥/* */:注释会和后面的令牌粘成一个键,色块预览静默失效。 - ⚠️ 主题会覆盖 base.css 的同名令牌 —— 基座改配色必须同步改主题。改
--tb-text-muted时 sakura#a08c94(2.8:1)、shiroko#8794a7(2.76:1) 都还没跟上,"修了但主题页没变"就是这么来的。 现已调到#78696e(4.61) /#656e7a(4.63),深色块#a18790/#7f8ea1(对压平后的卡片 4.62)。 主色也已修(#0e6fd0/#3b6dac/#ba3e66)+ 新增--tb-on-primary,见 topics/style.md。 量对比度时半透明--tb-surface要压平到 --tb-bg 再算,别当纯白。 - 主题选择页的色块由浅色块的
--tb-bg+--tb-primary生成(swatchOf),注释里别写令牌名。 test01是用户 2026-10-21 自建又删掉的验证主题(css + 2 张 webp 已移除,未提交)。 删主题只需删文件:build()读不到 css 会打 warning 并忽略,已选该主题的用户静默回退站点默认。static/images/shiroko-cutout.png也一并删除(2026-10-21):它从不进 embed,只是 docs 里的图生图参考图, 仓库不存这类大图。- ⚠️ 白上白素材无法用颜色分开:白底 + 白主体(如自行车)时,车身与背景是同一个白
(实测都
#f9f9f9),floodfill 只吃外圈,轮圈内/车架三角/车筐整块留下 = 看着"没抠干净"。 自检:不透明像素里近白(>240) 占比,正常应≈0(修复前 50%)。要么全部转透明(成品变线稿风), 要么重出绿幕/透明背景素材。细节见docs/theme-shiroko-assets-spec.md的「白上白」。 - ⚠️ 换
props/*.webp时不要裁画布:--tb-deco-size是auto 259px,宽度按原图比例算, 裁完锚点left calc(50% - 612px)会漂;四周透明边留着不影响观感。