wait4xandGLM-5.3
9702c9faf4
posts schema 加 cover?: image（image() 走 Astro 优化管线，仅阅读 轨消费）；BooksPage 有封面渲染 96/192 两档 Image、无封面优雅回 退现有色脊卡设计（零破坏）；目录 content/posts/assets/books/ 就位； docs/写作指南.md 补用法节（路径/frontmatter 示例/尺寸建议）。 验证: pnpm astro build；E2E 34/34；现 5 本书全部回退色脊卡渲染 （封面貌 0，待用户加图） Spec: none (书封接口预留，用户自行加图) Co-authored-by: GLM-5.3
3.4 KiB
3.4 KiB
写作指南：在文章里插入图片 / 视频 / 音频
适用：
content/posts/*.md（书评与技术轨通用）。资产目录约定 + 三种媒体的写法 + 体积纪律。
目录约定
content/posts/
├── my-post.md # 文章
└── assets/
└── my-post/ # 与文章 slug 同名：该篇私有资产
├── photo.jpg
├── clip.mp4
└── voice.mp3
相对引用一律 ./assets/{slug}/文件名，构建时 Astro 图片服务自动出多尺寸 webp。
图片
标准 markdown 语法，alt 必填（无障碍 + 暗色降亮依据）：
*图：外滩的傍晚* ← 紧跟媒体的斜体独立段 = 图注（居中小字）
- 图注可选；写法固定为
*…*单独成段，紧跟图片 - 压缩纪律：入仓前长边 ≤2400px（可跑
python3 scripts/photos_ingest.py，对 posts 资产同样有效的思路，图片请自行用同规格压缩）
视频 / 音频
markdown 原生不认视音频，写 HTML 标签；raw HTML 的相对路径不走 Astro
资产管线（只有 ![]() 图片语法走），所以媒体文件放 public/media/{slug}/
（构建原样拷入 dist），引用用绝对路径 /media/...：
public/media/my-post/clip.mp4 ← 文件放这里
<video controls preload="metadata" src="/media/my-post/clip.mp4"></video>
*片头三秒试拍*
<audio controls preload="metadata" src="/media/my-post/voice.mp3"></audio>
*朗读：面纱选段*
preload="metadata"必写（不预拖流量，只取时长/首帧）- 图注警示：斜体图注行内不要裸写
<video>/<audio>字样——markdown 会把它渲染成真实元素（黑盒+吞文字），提及时用反引号 ` - 样式已全局处理（视频全宽圆角黑底、音频胶囊条）
- /media/ 命名空间同时覆盖"仓内小文件"与"仓外 store 大文件"（见体积纪律表）
体积纪律（git 仓红线）
| 媒体 | 入仓上限 | 超限怎么办 |
|---|---|---|
| 图片 | 单张 ≤1MB（2400px 压缩后通常 200-800KB） | 重压 |
| 音频 | ≤5MB（3 分钟 128kbps ≈ 2.8MB） | 降码率 |
| 视频 | ≤5MB | 放仓外 ~/docker_apps/blog/media/（photos-originals 同模式），文章里用绝对路径 /media/xxx.mp4；build.sh 同步段待该场景首次出现时补 |
历史教训：21 张原图 196M 直接入仓曾撞死推送通道（git 历史
7a2880b重写才甩掉）。
三媒齐用的样例
见 content/posts/media-sample.md（draft 文章，仅构建验证用，不上线）。
发布提醒
- push main → webhook 自动构建发布（约 10 秒）
- 新文章要英文版：跑
python3 scripts/translate/translate_posts.py（幂等，代码块不会被翻译破坏的风险见其 README 注释；锁定润色用 frontmatterlocked: true）
书封图（/books 书架）
阅读轨文章可选加书封：
- 图片放
content/posts/assets/books/<slug>.jpg（建议宽 480px、高宽比约 2:3） - 对应文章 frontmatter 加一行：
cover: ./assets/books/<slug>.jpg - 构建自动优化出 96/192 两档；没有 cover 的文章优雅回退现有色脊卡设计，无需改任何代码
示例 frontmatter：
---
title: "面纱"
pubDate: 2024-06-01
category: reading
bookAuthor: "毛姆"
mood: "#8a6f4a"
cover: ./assets/books/mian-sha.jpg
---