new-sakura：花枝朝向与分叉修正，素材包一键导出上传到对象存储
- gen_new_sakura.py：花朵加各自旋转角（原来一律朝上，像贴纸）；分叉从垂直下垂改成向右上斜； 新增 --asset-base / --out —— 填前缀就引用对象存储位图，留空仍是内联 SVG。 - export_assets.py（新增）：从 gen_new_sakura 的同一份 SVG 出图（直接 import，不另画一套）， 用无头 Chrome 透明底渲染后转 WebP；--upload 一次传 CSS + 5 张 webp + 生成的 INSTALL.txt， 公开地址按 data/r2.txt 的 image_bucket_cdn_host（与 app.ini 同名）拼。 - serve.upload_files 支持逐文件 cacheControl。原来硬编码 immutable，而 INSTALL.txt 与镜像 CSS 的键不带版本 —— 重新生成后浏览器/CDN 一年内都还是旧内容。现在位图 1 天、CSS 5 分钟、 README 60 秒；selftest 补一条覆盖断言。 - 文档更正两处事实：①自定义域 r2.337845818.best 实测可匿名读（S3 endpoint 仍 403）； ②服务端有 gzip，内联版 51KB 实际传输 3.9KB，比位图版（2.7KB + 5 图 48.9KB）小得多， 所以「换位图省 CSS 体积」不成立，位图只在素材要复用到非 CSS 场景时才有意义。 另记：曾以 immutable 传过的键必须去控制台清缓存，重传不会让边缘失效。
This commit is contained in:
tamakyi
@@ -11,7 +11,7 @@
|
||||
- 换花色只改 `dev/theme-tools/gen_new_sakura.py` 里的一个色值，重跑即得；
|
||||
- 没有额外 HTTP 请求 —— SVG 就在 CSS 里。
|
||||
|
||||
代价是 CSS 有 40~50KB（gzip 后约 12KB）。主题 CSS 走 `StaticVersion` 缓存，一次性开销。
|
||||
代价是 CSS 有 51KB（服务端有 gzip，实际传输约 3.9KB）。主题 CSS 走 `StaticVersion` 缓存，一次性开销。
|
||||
|
||||
## 结构
|
||||
|
||||
@@ -70,6 +70,62 @@ python dev/theme-tools/gen_new_sakura.py
|
||||
| `--tb-primary` | `#b8436a` (4.9:1) | `#ff93b4` (8.2:1) | 原候选 `#c14a72` 只有 4.39:1，压深 |
|
||||
| `--tb-on-primary` | `#ffffff` (5.2:1) | `#1b1014` (8.9:1) | 主色按钮上的字 |
|
||||
|
||||
## 素材包（可选，已传到对象存储）
|
||||
|
||||
主题线上**不需要**任何素材：樱花是内联矢量。但同一个花形也导出成了位图，
|
||||
放在对象存储上备用（`themes/new-sakura/`，共 7 个对象）：
|
||||
|
||||
| 键 | 内容 |
|
||||
| --- | --- |
|
||||
| `new-sakura.css` | 主题本体（备份，便于分发） |
|
||||
| `branch-right.webp` / `branch-left.webp` | 花枝 840×640 透明底（互为镜像） |
|
||||
| `blossom.webp` | 单朵樱花 400×400 透明底 |
|
||||
| `petal.webp` | 带缺口的花瓣 240×336 透明底 |
|
||||
| `pattern.webp` | 平铺底纹 600×600 透明底 |
|
||||
| `INSTALL.txt` | 包内说明 |
|
||||
|
||||
重新导出 / 上传（`--upload` 会一起传 CSS、位图和生成的 `INSTALL.txt`）：
|
||||
|
||||
```bash
|
||||
python dev/theme-tools/export_assets.py # 只导出到 outputs/sakura-assets
|
||||
python dev/theme-tools/export_assets.py --upload # 导出并上传，读 data/r2.txt
|
||||
```
|
||||
|
||||
`data/r2.txt` 是部署凭据（`image_endpoint` / `image_access_id` / `image_access_secret` /
|
||||
`image_bucket` / `image_bucket_cdn_host`），**不进版本库**（`.gitignore` 里的 `/data/`）。
|
||||
`image_bucket_cdn_host` 与 `conf/app.ini` 同名同义：只写主机名，不带 `https://` 和路径；
|
||||
没有它时 `INSTALL.txt` 里的公开地址会写成占位符。
|
||||
|
||||
缓存策略：位图 `max-age=86400`、CSS 镜像 `300`、`INSTALL.txt` `60`。
|
||||
这些键**都不带内容版本**，所以刻意不用 `immutable` —— 否则重新导出后，浏览器与 CDN
|
||||
一年内拿到的都还是旧图。想要一年长缓存，得把内容哈希写进文件名（CSS 里的地址跟着换）。
|
||||
|
||||
⚠️ 若某个键曾经以 `immutable` 传过（本主题第一版就是这样），CDN 会一直给旧副本，
|
||||
改完必须去控制台按 URL 清一次缓存，光重传没用。
|
||||
|
||||
### 位图版（引用对象存储）
|
||||
|
||||
桶绑了自定义域 `r2.337845818.best`（实测匿名 GET 200、`image/webp`、大小一致），
|
||||
所以可以把 CSS 从内联切到位图：
|
||||
|
||||
```bash
|
||||
python dev/theme-tools/gen_new_sakura.py \
|
||||
--asset-base https://r2.337845818.best/themes/new-sakura \
|
||||
--out static/css/themes/new-sakura.css
|
||||
```
|
||||
|
||||
| 版本 | CSS | gzip 后 | 额外请求 | 清晰度 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 内联 SVG（默认） | 51.2KB | **3.9KB** | 0 | 矢量，任意 DPR |
|
||||
| 位图 | 10.6KB | 2.7KB | 5 个 webp，共 48.9KB | 2 倍图 |
|
||||
|
||||
服务端挂了 gzip（`internal/route/gzip.go`），所以内联版**总传输 3.9KB**，比位图版的
|
||||
2.7 + 48.9 = 51.6KB 小一个数量级 —— 换位图省不了流量，只是把开销从 CSS 挪到图片。
|
||||
位图版唯一正当的理由是**素材要单独复用**（分享卡、海报、其它系统）。
|
||||
|
||||
⚠️ 直接连桶的 S3 endpoint（`*.r2.cloudflarestorage.com`）会 403，**只有自定义域/r2.dev 可匿名读**。
|
||||
切之前先 `curl -I` 验一下前缀；切完 `go build` 部署，否则 embed 里还是旧的。
|
||||
|
||||
## 为什么不用主题生成器出图
|
||||
|
||||
生成器的装饰层只支持「图片素材」（导出时打进 zip 或传对象存储），没有内联 SVG 图层。
|
||||
|
||||
Reference in New Issue
Block a user