Jekyll：如何访问自定义集合（Collection）的前置属性？

看起来你已经走对了大部分步骤——配置了_works集合、开启了输出、设置了独立布局，但就是拿不到Frontmatter属性对吧？别着急，这通常是因为布局里调用属性的方式不对，或者一些容易忽略的小细节，我给你梳理几个关键点：

1. 先确认作品文档的Frontmatter格式正确 #

首先检查_works/some-name.md里的Frontmatter是不是标准YAML格式，比如：

---
title: "我的创意设计作品"
date: 2024-05-20
tags: [UI设计, 平面]
description: "这是我为某品牌做的视觉设计方案"
---

要确保开头和结尾的---没有拼写错误，每个属性的冒号后面必须加空格（YAML的硬性要求），不然Jekyll会识别失败。

2. 在单个作品布局中用{{ page.xxx }}访问属性 #

在你的layouts/work.html里，不能直接写{{ title }}或者{{ tags }}，因为单个集合文档的Frontmatter属性都挂载在page对象下。举个正确的示例：

---
layout: default
---
<div class="work-single">
  <!-- 访问标题 -->
  <h1 class="work-title">{{ page.title }}</h1>
  <!-- 访问日期并格式化 -->
  <p class="work-date">{{ page.date | date: "%Y年%m月%d日" }}</p>
  <!-- 访问自定义描述 -->
  <p class="work-desc">{{ page.description }}</p>
  <!-- 内容区域 -->
  <div class="work-content">{{ content }}</div>
</div>

这里的page对象包含了所有Frontmatter属性，还有url、path这些Jekyll自动生成的属性，都可以通过page.url这样的方式调用。

3. 遍历集合列表时用循环变量访问属性 #

如果你要做一个作品列表页，遍历site.works集合的时候，要使用循环里的变量（比如work）来访问属性，示例：

<div class="works-list">
  {% for work in site.works %}
    <article class="work-item">
      <a href="{{ work.url }}">
        <h2>{{ work.title }}</h2>
        <p>{{ work.description | truncate: 100 }}</p>
      </a>
    </article>
  {% endfor %}
</div>

这里的work就是每个作品文档的对象，直接用work.title就能拿到对应Frontmatter里的标题。

4. 别忘了重启Jekyll服务 #

如果你修改了_config.yml或者新增了集合文档，一定要重启jekyll serve命令，不然Jekyll不会加载新的配置和文档，导致属性无法读取。

如果按照上面的步骤调整后还是有问题，可以检查一下：

• 是不是Frontmatter里的属性名拼写错误（比如把title写成了tilte）
• 集合的配置有没有写错（你已经设置了output: true，这部分没问题）
• 布局文件的路径是不是正确（layouts/work.html这个路径是对的，要确保文件名没写错）

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