将博客从 Hugo Even 主题 迁移到了基于 Astro 的 Slate 主题。在迁移过程中，发现原有的多图排版功能需要重新适配，因为新主题使用了不同的 HTML 结构。
在 Hugo Even 主题中，Markdown 中的图片会被渲染为 <p> 标签包裹 <a> 标签的形式，而 Slate 主题则使用 <div class="rehype-figure-container"> 包裹 <figure class="rehype-figure"> 的结构。
/* 两张图片分栏 */.rehype-figure-container:has(> .rehype-figure:nth-child(2)) { column-count: 2; column-gap: 8px; margin: 6px 0;}
/* 三张图片分栏 */.rehype-figure-container:has(> .rehype-figure:nth-child(3)) { column-count: 3; column-gap: 8px; margin: 6px 0;}
/* 四张图片分栏 */.rehype-figure-container:has(> .rehype-figure:nth-child(4)) { column-count: 4; column-gap: 8px; margin: 6px 0;}
/* 五张图片分栏 */.rehype-figure-container:has(> .rehype-figure:nth-child(5)) { column-count: 5; column-gap: 8px; margin: 6px 0;}
/* 六张图片分栏 */.rehype-figure-container:has(> .rehype-figure:nth-child(6)) { column-count: 4; column-gap: 8px; margin: 6px 0;}
/* 处理图片显示 */.rehype-figure-container:has(> .rehype-figure:nth-child(2)) .rehype-figure,.rehype-figure-container:has(> .rehype-figure:nth-child(3)) .rehype-figure,.rehype-figure-container:has(> .rehype-figure:nth-child(4)) .rehype-figure,.rehype-figure-container:has(> .rehype-figure:nth-child(5)) .rehype-figure,.rehype-figure-container:has(> .rehype-figure:nth-child(6)) .rehype-figure { display: block; margin-bottom: 8px; break-inside: avoid;}
.rehype-figure-container:has(> .rehype-figure:nth-child(2)) img,.rehype-figure-container:has(> .rehype-figure:nth-child(3)) img,.rehype-figure-container:has(> .rehype-figure:nth-child(4)) img,.rehype-figure-container:has(> .rehype-figure:nth-child(5)) img,.rehype-figure-container:has(> .rehype-figure:nth-child(6)) img { width: 100%; height: auto; display: block; margin: 0;}
/* 响应式设计 */@media (max-width: 768px) { .rehype-figure-container:has(> .rehype-figure:nth-child(2)), .rehype-figure-container:has(> .rehype-figure:nth-child(3)), .rehype-figure-container:has(> .rehype-figure:nth-child(4)), .rehype-figure-container:has(> .rehype-figure:nth-child(5)), .rehype-figure-container:has(> .rehype-figure:nth-child(6)) { column-count: 1; column-gap: 0; }}使用规则与 Hugo Even 主题保持一致。图片之间可以换行，但不能空行，CSS 会根据容器内的图片数量自动调整分栏数量。支持 2-6 张图片的自动分栏。
四张图片的演示效果：
更多图片演示效果请查看 Hugo 多图排版 even 主题适配。
将上述 CSS 代码添加到 Slate 主题的样式文件中。具体位置可能因主题配置而异，通常可以添加到 src/assets/style/common.css 或者创建新的样式文件并在主题配置中引入。
编辑于 Jul 14, 2025