我的博客系统一直有个缺撼是没有画廊模式，所以我不写有大量图片的文章——横竖图宽度不一，并且页面过长，极不美观。我没有想到好的开发方案，搁置至今。但是为了写《2025 CMS 杭州车展小记》，我重新拾起这个历史包袱攻克之。

开发画廊的困难不在前端，而在后端如何组织数据。我研究过 WordPress 块编辑器的图库，以及插件实现的画廊。一来操作步骤繁琐，二来存入数据库的是 html 代码，都不如意。我的设计理念是人只需最简洁的操作，剩下全由程序完成。我只想基于 Markdown 本身实现，不想引入新的复杂操作。

我注意到 Markdown 解析图片有以下情况：

同一行排列，两个 <img> 由相应数量的空格分隔：

![][1]![][2]

  [1]: img1.jpg
  [2]: img2.jpg

<img src="img1.jpg"><img src="img2.jpg">

换行排列，两个 <img> 由 <br> 分隔：

![][1]
![][2]

  [1]: img1.jpg
  [2]: img2.jpg

<img src="img1.jpg"><br><img src="img2.jpg">

隔一行排列，两个 <img> 由 <p> 包裹：

![][1]

![][2]

  [1]: img1.jpg
  [2]: img2.jpg

<p><img src="img1.jpg"></p><p><img src="img2.jpg"></p>

如此就有了实现基础：

• 将由任意空格相连的<img>呈现为一排等高相连的组图
• 将由<br>相连的组图吸附到一起，形成画廊

上图所示画廊，只需要在编辑器中填写：

![][1]![][2]
![][3]![][4]![][5]
![][6]![][7]

  [1]: img1.jpg
  [2]: img2.jpg
  [3]: img3.jpg
  [4]: img4.jpg
  [5]: img5.jpg
  [6]: img6.jpg
  [7]: img7.jpg

这何尝不是“所见即所得”的图片排版呢？

以上功能只针对电脑端，手机端未做修改。一是因为手机端横竖图均按最大宽度填充，不存在宽度不一的问题。二是手机端已经牢固培养了瀑布流的用户习惯，长页面造成的困扰较小。