写前哔哔

心血来潮，突然想把主页文章卡片改双栏瀑布流，根据官方文档教程，只需要把配置文件中的index_layout: 1改为index_layout: 6即可，但是在我27英寸显示器中成了三栏，更是当文章标题过长时会导致卡片错位情况，这种错位样式在三栏中个人觉得难以欣赏。

问题解决

通过请教我豆包大神，瀑布流布局（index_layout: 6 或 7）的列数是通过 .recent-post-item 的宽度计算控制的。默认配置在超宽屏幕（≥2000px）会显示 3 列。具体的样式在[BlogRoot]\themes\butterfly\source\css\_page\homepage.styl中调整，将3改为2即可：

1
2
3
4
5
6
7
8
9
10
11
if $indexLayout == 6 || ($indexLayout == 7)
  display: inline-block
  width: calc(100% / 2 - 8px)  // 中等屏幕默认两列
  vertical-align: top

  +maxWidth768()  // 移动端单列
    width: 100%

  +minWidth2000()  // 超宽屏幕（≥2000px）默认三列
-    width: calc(100% / 3 - 8px)
+    width: calc(100% / 2 - 8px)

最终的效果：