# 图文互构：同目录配图、图注与排版留白

> 从同目录素材收纳到出版级图注，解析如何在长文深度写作中构筑视觉节奏与留白美学

- HTML: /nodes/image-gallery-showcase/
- Markdown: /nodes/image-gallery-showcase.md
- Section: Nodes / 实践
- Published: 2026.11.08
- Column: Maplen
- Tags: 功能展示

---

在许多技术博客与网络写作中，图片的管理与展示经常沦为令人头痛的噩梦：
- 引用第三方图床，过不了几个月就因为服务关闭或防盗链策略而变成一片冰冷的破图图标；
- 所有图片混杂地丢在一个巨大的全局 `assets/` 或 `public/` 目录下，时间一长，连作者自己都不知道哪张图片属于哪篇文章，删减文章时留下大量冗余垃圾；
- 图片直接突兀地插在段落中间，没有边距、没有图注、没有对齐，硬生生打碎了读者沉浸式的阅读心流。

在 [Maplen](/wiki/maplen.md) 的设计中，我确立了 **「素材同目录收纳（Co-located Assets）」** 与 **「克制的图文互构美学」**。

这篇手记通过具体案例，向大家介绍我是如何在长篇手记中优雅地安排配图、图注与版式呼吸的。

---

## 一、同目录收纳原则：当前阶段的局部内聚

在我的规范中，凡是包含专属配图或单篇专属动态组件的文章，我目前统一使用同名文件夹结构进行就近收纳：

```text title="目录结构示例" {3-6}
src/content/blog/nodes/image-gallery-showcase/
├── image-gallery-showcase.mdx            # 正文主文档
├── sample-landscape.webp                 # 题头远山意象图
├── figure-a.webp                         # 对比图 A（初始样本）
├── figure-b.webp                         # 对比图 B（滤波校准后）
└── MyWidget.tsx                          # 仅本篇使用的专属动态组件（可选）
```

### 这一收纳方式的初衷与局限：
1. **就近收纳与资产内聚**：文章专属的微量示意配图与组件放置在同一文件夹，移动或归档文章时无需去全局目录翻找散碎文件；
2. **[Astro](/wiki/astro.md) 构建期静态优化**：Astro 会自动分析同目录引用的本地图片，在构建期转换为现代 WebP 格式，提取准确的 `width` 与 `height` 属性防止页面布局抖动（CLS）；
3. **清醒认知：不要把当前的纯静态当做长久优势**：
   必须坦承，把二进制图片直接塞进 Git 仓库，仅仅适用于当前建站初期、少量低分辨率矢量图或核心示意插图的场景。随着未来创作体量的增长，这种方式存在显而易见的技术瓶颈——高分辨率摄影原片、大尺寸胶片扫描件一旦持续合入代码库，会迅速导致 `.git` 体积膨胀失控、拉取仓库极其缓慢。
   因此，**未来的图像体系必然需要引入独立的媒体存储池（Storage Pool）**。

---

## 二、出版级单图：留白与图注

好的插图不是文字的附属点缀，它应当像书籍印刷中的插页一样，享有神圣的版面呼吸权。

<figure className="my-6">
  
  <figcaption className="mt-2 text-center text-xs text-[var(--color-text-muted)] italic">
    图 1：纸墨之间的远山意象。通过斜体居中图注（Caption），赋予图像文献级的严肃感与解释力。
  </figcaption>
</figure>

### 排版细节规范：
- **圆角与轻描边**：图片默认带有柔和的轻微圆角与极细的语义边框（`var(--color-border)`），在亮色「褐页」与暗色「暖墨」下均能自然融入底纸，绝不生硬切割背景；
- **规范的图注（Caption）**：紧随图片下方，采用比正文稍小一号的字阶、更淡的墨色与轻微的斜体修饰，言简意赅地注明拍摄背景、示意含义或数据来源。

---

## 三、多图对比与排版范式

在撰写工程拆解（Tear-down）、旅行纪事（Narrative）或光影镜头分析（Nebula）时，经常需要多张图片并列呈现。

### 1. 双图横向并排对比（Before vs. After）
通过简单的 CSS 网格包装配合 Astro `` 优化组件，可以实现两幅真实画面的并排对照：

<div className="my-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
  <figure className="m-0">
    
    <figcaption className="mt-2 text-center text-xs text-[var(--color-text-muted)] italic">
      图 A · 枫叶叶脉标本（初始未校准状态）
    </figcaption>
  </figure>

  <figure className="m-0">
    
    <figcaption className="mt-2 text-center text-xs text-[var(--color-text-muted)] italic">
      图 B · 枫叶叶脉标本（滤波补偿校准后）
    </figcaption>
  </figure>
</div>

在移动端窄屏下，网格会自动垂直折叠为单列；而在宽屏桌面端，两张对比图则对称舒展，整齐划一。

---

## 四、面向未来的图像架构：从本地过渡到独立存储池

图像排版不仅关乎版面美学，更关乎长期的工程演进。在未来的系统迭代中，Maplen 的媒体策略将分步推进：

### 1. 动静分离：引入专业对象存储池（Storage Pool）
- **当前阶段**：以本地同目录存放核心轻量示意图，确保静态手记在本地完全自治、无需联网即可编译预览；
- **未来演进**：对于 [Nebula · 光影](/nebula/) 中的高分辨率电影截图、摄影胶片，以及 [Narrative · 纪事](/narrative/) 中的大量生活物证照片，将剥离出 Git 代码仓库，统一接入如 Cloudflare R2 等独立对象存储池；
- **轻量解耦**：代码仓库只保留文字与排版代码，保持仓库的轻盈与极速同步，由存储池配合边缘 CDN 负责大体积媒体的高速缓存与流式交付。

### 2. 视觉节制原则：一篇文章只保留一个核心视觉焦点
在网页排版中，「堆砌」永远比「留白」容易。但在长文深度写作中，我始终坚持遵循节制美学：
1. **一个核心视觉中心**：工程手记把焦点留给可交互的模拟视窗，光影手记把焦点留给最关键的一帧静止画面，避免无意义的装饰性图片泛滥；
2. **让图片承担信息，而不是情绪噪音**：每一幅被我选入文章的画面，要么是在呈现直观的工程与拓扑关系，要么是真实的物证记录；
3. **保留留白呼吸**：图表前后留出呼吸边距，让读者在密集的思考推演后获得宁静的歇息。

当图像拥有了克制，文字才能焕发真正的力量。