Add image captions and Mermaid responsive styles, rewrite blog content

for clarity

content/blog/media-test.md

@@ -1,19 +1,19 @@
 ---
-title: "媒体嵌入测试：视频与图片"
+title: "Hugo 站点中嵌入视频与图片的最佳实践"
 date: 2026-05-16T12:00:00+08:00
 draft: false
 poet: |
   一花一世界，
   一叶一菩提。
-  ——《华严经》，古印度/中国
-description: "测试 Hugo 对 B 站视频嵌入和多种图片格式的渲染效果。包含 iframe 视频播放器、横版图片、内联对比和居中展示，验证移动端和桌面端的布局表现。"
+  ——《华严经》
+description: "静态站点不等于只能放文字。B 站视频的自适应嵌入方案、图片懒加载与响应式处理、以及如何在 Hugo 里保持多媒体内容的可维护性。"
 ---
 
-这是一篇测试文章，验证 Hugo 对 B 站视频嵌入和图片渲染的支持。
+静态博客常被认为只能承载纯文本，但实际上 Hugo 对多媒体内容的支持相当完整。本文记录本站的视频嵌入和图片排版方案，供有类似需求的读者参考。
 
-## 嵌入式视频
+## B 站视频嵌入
 
-下面是 B 站视频 BV1AWRVB2EAz 的嵌入播放器：
+Hugo 的 `unsafe: true` 配置允许直接插入 `<iframe>`，这让嵌入第三方播放器变得简单。下面是本站文章中使用的 B 站视频嵌入代码：
 
 <div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden; margin: 1.5rem 0;">
   <iframe
@@ -27,26 +27,37 @@ description: "测试 Hugo 对 B 站视频嵌入和多种图片格式的渲染效
   </iframe>
 </div>
 
-视频通过 B 站官方播放器嵌入，支持弹幕、倍速、画质切换。
+几个关键参数：`high_quality=1` 默认启用高清画质，`autoplay=0` 禁用自动播放（避免对读者造成打扰）。外层容器的 `padding-bottom: 75%` 是 4:3 比例，如果视频是 16:9 改成 `56.25%` 即可。
 
-## 图片渲染测试
+## 图片排版实践
 
-### 横版图片
+### 宽幅配图
+
+对于需要烘托氛围的宽幅图片，直接使用 Markdown 默认语法即可，Hugo 会自动处理响应式缩放：
 
 ![AI 主题图](/images/ai.jpg)
+{{< caption >}}宽幅配图适合放在文章开头，作为视觉呼吸点。{{< /caption >}}
 
-### 内联对比
+这类图片适合放在文章开头或章节之间作为视觉呼吸点。
 
-两张图并排展示：
+### 多图并列
+
+需要对比展示时，可以将图片连续排列。配合 Hugo 的渲染引擎，相邻图片会自动获得合适的间距：
 
 ![编程](/images/coding.jpg)
+{{< caption >}}编程与思考。{{< /caption >}}
 
 ![思考](/images/thinking.jpg)
 
-### 小图居中
+### 配图居中
+
+适量使用图片比堆砌更能提升阅读体验。一张位置恰当的配图可以给段落之间留出自然的停顿：
 
 ![子弹日记](/images/journal.jpg)
+{{< caption >}}一张位置恰当的配图，给段落之间留出自然的停顿。{{< /caption >}}
 
----
+## 多媒体文件的组织
 
-以上测试覆盖了视频嵌入和多种图片展示场景。如果你在手机或其他设备上看到布局异常，需要针对性调整。
+本站将所有图片和字体统一放入 `static/` 目录，引用时使用绝对路径 `/images/xxx.jpg`。这样做的好处是路径清晰、不受页面层级影响，也方便后续迁移到 CDN。
+
+如果你也在用 Hugo 搭建个人站点，多媒体内容的处理原则就一条：**路径统一、格式克制、体积有数**。祝搭建愉快。