Hugo 多图排版这样来
💡
原文中文，约1500字，阅读约需4分钟。
📝
内容提要
之前采用的瀑布流布局存在图片加载问题，现改用纯CSS方案，全屏展示图片。编辑器内插入图片，CSS根据数量显示列数。全屏图片短代码适合单栏主题。文章内容调用格式如图。
🎯
关键要点
-
之前采用的瀑布流布局存在图片加载问题，需等待所有图片加载完成。
-
现已改用纯CSS方案，使用column-count和p:has(> img:nth-child)来展示图片。
-
新方案的缺点是图片排列顺序导致各列高度不一致，但效果可接受。
-
全屏展示图片结合Hugo短代码实现，需按照特定格式插入图片。
-
图片之间可以换行但不空行，以便CSS正确匹配列数。
-
相关CSS需根据主题进行调整，确保样式匹配。
-
进阶全屏图片短代码模板和CSS适合单栏主题，计算方式为主题宽度的一半加上10px。
-
提供了短代码模板和相关CSS的具体示例。
➡️
