Files
tamabox/docs/theme-shiroko.md
T
tamakyi a6059bec1b theme: 启动日志暴露未登记的主题
新增主题后忘了写进 [theme] available,表现只是"设置页里找不到",
日志里没有任何痕迹。现在启动时会打:
- info  主题注册表已加载 enabled=...
- warn  [theme] available 未登记以下主题 themes=shiroko available=...

discover() 用 fs.Glob 扫内嵌 css/themes/*.css,按 slug 规则过滤掉 _scaffold.css。
示例配置补上 shiroko,文档补「部署后看不到主题」的两步排查。
2026-10-19 21:05:46 +08:00

128 lines
6.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 主题「砂狼白子」(shiroko)
阿拜多斯学园风格的灰蓝/银白配色,附带 Q 版人物插画。启用方式:
```ini
[theme]
available = default,sakura,shiroko
```
箱主在「账号设置 → 主题外观」里选择即可。作用范围与其他主题一致:提问箱页面、本人投票页、`/user` 后台。
## 配色
| 令牌 | 浅色 | 深色 |
| --- | --- | --- |
| `--tb-bg` / `--tb-navbar` | `#edf2f8` | `#141a22` |
| `--tb-surface` | `#ffffff` | `#1d2530` |
| `--tb-surface-2` | `#e5ecf5` | `#273140` |
| `--tb-border` | `#d6e0ec` | `#334052` |
| `--tb-text` | `#222d3b` | `#e3eaf4` |
| `--tb-primary` | `#4a7fc1` | `#6fa3e0` |
## 插画布置
| 位置 | 内容 | 尺寸 |
| --- | --- | --- |
| 右下角 | 用户提供的立绘(16% 透明,作背景水印) | `auto 520px` |
| 左下角 | `doze`(站着打瞌睡) | `auto 240px` |
| 左上角 | `wave`(挥手) | `auto 172px` |
| 右上角 | `cheer`(双手欢呼) | `auto 160px` |
| 右中 | `think`(托腮) | `auto 126px` |
| 整页平铺 | 雪花 + 光环 + 圆环 + 点簇(320px 一铺) | `pattern.svg` |
| ≤640px | 只保留立绘 + `doze`,尺寸减半 | `@media` |
插画走 **装饰层**(`--tb-deco` / `--tb-deco-size` / `--tb-deco-position`),不是整页背景图:
- 固定像素尺寸 + 四角定位,**任何视口比例都不会被裁切**(`cover` 做不到,竖屏桌面会把贴边的插画切掉);
- 固定 6 个槽位,必须写满 6 个值,缺的填 `none` —— 多背景各列表的层数必须恒定
(1 图案 + 6 装饰 + 1 背景 = 8),值一多一少,分层就整体错位(会出现整页重复小人);
- 深色模式关掉装饰层,只留底色与浅色图案。人物是银白/浅灰为主,压到深色底上会发灰发脏。
## 素材清单
位于 `static/images/themes/shiroko/`,已随二进制嵌入(`static/fs.go` 的 `images/themes`)。
| 文件 | 用途 | 尺寸 | 体积 |
| --- | --- | --- | --- |
| `chibi/wave.webp` | 挥手 | 324×620 | 27KB |
| `chibi/cheer.webp` | 双手欢呼 | 354×620 | 27KB |
| `chibi/think.webp` | 托腮 | 283×620 | 26KB |
| `chibi/doze.webp` | 打瞌睡 | 274×620 | 26KB |
| `hero-fade.webp` | 用户立绘,预乘 16% 透明度 | 275×620 | 18KB |
| `pattern.svg` | 浅色平铺(几何纹样) | 240×240 | 0.9KB |
| `pattern-dark.svg` | 深色平铺 | 240×240 | 0.8KB |
## 来源与授权
| 素材 | 来源 |
| --- | --- |
| `static/images/shiroko-cutout.png` → `hero-fade.webp` | **用户自行用 AI 生成**的立绘,裁边后降透明度 |
| `chibi/*.webp` | WorkBuddy ImageGen **以用户立绘为参考图**(image-to-image)生成,再抠白底 |
| `pattern.svg` / `pattern-dark.svg` | 手写 SVG,纯几何,无外部素材 |
### 生成与抠图参数
- 参考图:`static/images/shiroko-cutout.png`,`input_fidelity: high`,保证角色造型与平涂风格一致;
- 提示词骨架(四个姿态共用,只改动作句):
> Same character, same art style as the reference image: flat vector illustration, no outlines,
> simple shapes, soft pastel colors, minimal detail. A chibi anime girl with short fluffy
> silver-grey bob hair, pointed grey wolf ears, a small tilted cyan halo ring above her head,
> pale blue dot eyes, cyan scarf, dark navy blazer, light grey pleated skirt, cyan and black
> sneakers. { 动作 } Plain pure white background (#FFFFFF), no shadow, no ground, no text, no watermark.
- 动作句:`Standing full body, front view, one arm raised waving hello with a small smile` /
`both arms raised up cheering happily, big smile` /
`one hand resting on her cheek thinking, head slightly tilted` /
`eyes closed sleeping peacefully, head drooping slightly to one side`;
- 抠图:从四角 + 四边中点共 8 点做 floodfill(容差 16),再对 alpha 做 1px MinFilter 收边去白边,
裁 bbox 后统一缩放到高 620、WebP q90。
关键经验:**必须是"平涂无描边"**。先试过用手写 SVG 线稿,风格和用户那张立绘(色块、无描边)冲突,
而且没有真人手感会画得很抽象;用参考图 + image-to-image 出来的四张,角色特征和画风都稳。
**版权说明**:砂狼白子(砂狼シロコ)是《蔚蓝档案》的角色,版权归 NEXON Games / Yostar。
本主题为**非商用同人装饰**,仅作个人站点外观使用;若站点转为商业用途,请自行取得授权或换成原创素材。
## 替换 / 扩素材
1. 加姿态:按上面的提示词骨架换动作句生成,白底 → 抠图 → 存 `chibi/<name>.webp`(高 620),
再塞进 `shiroko.css` 的 `--tb-deco`(记得保持 6 个值)。
2. 换立绘:透明 PNG 覆盖 `static/images/shiroko-cutout.png`,按 620 高、alpha 16% 重新导出 `hero-fade.webp`。
3. 换配色:改 `shiroko.css` 的令牌即可,插画是位图,换色需重新生成。
4. 新增素材不需要改 `static/fs.go`(已嵌整个 `images/themes` 目录);但改了 CSS 必须把
`conf.StaticVersion` +1,否则老访客吃缓存看不到变化。
## 部署后设置页看不到这个主题?
先分两步确认,不要一上来就怀疑缓存:
1. **文件是否随二进制发布了** —— 直接取一次静态资源:
```bash
curl -o /dev/null -w "%{http_code}\n" \
https://<你的域名>/static/css/themes/shiroko.css?v=<StaticVersion>
```
返回 200 说明 css 已经嵌进去了;返回 404 说明部署的是旧二进制。
2. **是否登记进 `[theme] available`** —— 主题列表是启动时按白名单构建的,
css 在但没登记,设置页就看不到它。检查 `conf/app.ini`:
```ini
[theme]
default = default
available = default,sakura,shiroko
```
改完**重启**进程(`[theme]` 只在启动时读)。
启动日志会直接告诉你缺哪一行:
```
level=info msg="主题注册表已加载" enabled="default,sakura"
level=warning msg="[theme] available 未登记以下主题,它们不会出现在设置页"
available="default,sakura,shiroko" themes=shiroko
```