tamakyi
2f2e00ad65
按选定方向收敛： - 只留 sit 一个角色，左移 515px 让右侧约 40px 钻进卡片底下（卡片定宽 750 居中， 左沿 = 50% - 375px），被卡片挡掉一部分才有空间关系，不再浮在留白中间； - 离底边 26px（脚踩最后一像素像被裁掉），配一层椭圆径向渐变当接触阴影，避免悬空； - 纹样透明度 0.13 → 0.085（深色 0.09 → 0.055），图案 url 补 ?v=； - 收掉另外三个人物与第一层半透明立绘； - StaticVersion → 20261019p
137 lines
6.9 KiB
Markdown
137 lines
6.9 KiB
Markdown
# 主题「砂狼白子」（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` |
|
||
|
||
## 插画布置
|
||
|
||
| 位置 | 内容 | 尺寸 |
|
||
| --- | --- | --- |
|
||
| 卡片左下外侧 | `sit`（盘腿坐），右侧约 40px 钻进卡片底下 | `auto 340px`，≤1179px 时 `280px` |
|
||
| 人物脚下 | 椭圆接触阴影（CSS `radial-gradient`，不是图片） | `128px 15px` |
|
||
| 整页平铺 | 雪花 ×2 + 光环 + 两点（340px 一铺，opacity 0.085） | `pattern.svg` |
|
||
| ≤900px | 不出人物 —— 卡片占满宽度，两侧没有视觉空间 | `@media` |
|
||
|
||
摆位为什么是这个人样：
|
||
|
||
- **不要四角各摆一个**。人物之间、人物与内容之间都没有关系，读起来就是贴纸墙纸；
|
||
- **右下角不能放人**。页脚文案右对齐（社区规则 / 备案号 / 存活时长），人物会和它挤在一起；
|
||
- **要半隐在卡片后面**。被卡片挡掉一部分才有空间关系，否则就是浮在留白中间；
|
||
卡片定宽 750px 居中，左沿 = `50% - 375px`，人物宽约 177px，左移 515px 即遮住 40px；
|
||
- **离底边留 26px**。脚踩在窗口最后一行像素上会被读成"被裁掉"，抬高之后必须配接触阴影，
|
||
否则变成悬空。
|
||
- **纹样元素要均布**。全挤在 tile 上半部时，铺开后在整页形成明显的横向条纹带。
|
||
|
||
插画走 **装饰层**（`--tb-deco` / `--tb-deco-size` / `--tb-deco-position`），不是整页背景图：
|
||
|
||
- 固定像素尺寸 + 四角定位，**任何视口比例都不会被裁切**（`cover` 做不到，竖屏桌面会把贴边的插画切掉）；
|
||
- 固定 6 个槽位，必须写满 6 个值，缺的填 `none` —— 多背景各列表的层数必须恒定
|
||
（1 图案 + 6 装饰 + 1 背景 = 8），值一多一少，分层就整体错位（会出现整页重复小人）；
|
||
- 深色模式关掉装饰层，只留底色与浅色图案。人物是银白／浅灰为主，压到深色底上会发灰发脏。
|
||
- 图案是图片，不走 `StaticVersion` 缓存键（`Cache-Control: max-age=86400`）：
|
||
换 `pattern*.svg` 时要自己给 css 里的 url 补一个 `?v=`，否则老访客最多 24 小时看到旧纹样。
|
||
|
||
## 素材清单
|
||
|
||
位于 `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 |
|
||
| `chibi/sit.webp` | 盘腿坐 | 321×620 | 29KB |
|
||
| `pattern.svg` | 浅色平铺（几何纹样） | 240×240 | 0.9KB |
|
||
| `pattern-dark.svg` | 深色平铺 | 240×240 | 0.8KB |
|
||
|
||
## 来源与授权
|
||
|
||
| 素材 | 来源 |
|
||
| --- | --- |
|
||
| `static/images/shiroko-cutout.png` | **用户自行用 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`，再按同一提示词骨架重新生成姿态。
|
||
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
|
||
```
|