Blog 迁移 Slate 的多图排版适配

Blog 迁移 Slate 的多图排版适配

Jul 13 ·
2 分钟阅读
Astro Slate CSS

将博客从 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 13