Jekyll非文章/页面布局中如何组织段落数据并实现三列展示？

嘿，很高兴看到你在折腾Jekyll的minima主题！你的思路完全没问题——把展示内容和布局代码分开确实是更整洁的做法，维护起来也方便多了。我给你分享一个既符合Jekyll最佳实践，又能满足你需求的方案：

第一步：把三列内容放在独立的数据源文件里 #

Jekyll的_data目录专门用来存放静态数据，非常适合放这种需要和布局分离的展示文本。你可以这么做：

1. 在站点根目录创建_data文件夹（如果还没有的话）
2. 在_data里新建columns.yml文件，写入三列的内容：

- title: 第一列标题
  content: |
    这里是第一列的段落内容，支持多行文本，用竖线`|`可以保留换行格式。
    你可以在这里随便编辑内容，完全不用碰布局文件。
- title: 第二列标题
  content: |
    第二列的内容，比如介绍你的站点定位、个人兴趣方向都可以。
    编辑起来就像写普通文档一样简单。
- title: 第三列标题
  content: |
    第三列的内容，比如联系方式、站点更新说明，或者任何你想展示的信息。

第二步：在home.html布局里渲染三列内容 #

打开你创建的_layouts/home.html，替换或添加渲染三列的代码：

<!-- 三列容器 -->
<div class="three-column-grid">
  {% for column in site.data.columns %}
    <div class="column-card">
      <h3>{{ column.title }}</h3>
      <!-- 用markdownify把内容转为HTML格式，支持Markdown语法 -->
      <div class="column-content">{{ column.content | markdownify }}</div>
    </div>
  {% endfor %}
</div>

第三步：添加三列布局的CSS样式 #

minima主题支持自定义SCSS样式，你可以在assets/css目录下创建style.scss（如果没有的话），写入以下样式来实现响应式三列布局：

---
---
// 先导入minima的默认样式，保证主题基础样式不变
@import "minima";

.three-column-grid {
  display: grid;
  // 自动适配屏幕大小，小屏幕会自动堆叠成单列
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 0 1rem;
}

.column-card {
  padding: 1.2rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.column-content {
  line-height: 1.6;
}

为什么这么做？ #

• 内容和布局完全分离：以后要修改文本，直接编辑_data/columns.yml就行，不用碰布局代码
• 响应式设计：上面的CSS会自动在小屏幕上把三列堆叠成单列，适配手机等设备
• 支持Markdown：用markdownify过滤器可以让你的内容支持Markdown语法，比如加粗、列表等

如果你的三列内容只在首页用到，也可以选择把内容写在首页的front matter里（比如index.md的顶部），然后在布局里用{% for column in page.columns %}来循环渲染，不过用_data的方式更适合内容复用，也更整洁。

内容的提问来源于stack exchange，提问作者Ender