如何修正YAML frontmatter语法 在Netlify CMS中获取单个service供Nunjucks使用

1. 结构差异说明 #

你当前写的YAML结构和预期目标结构不一致：

• 你当前的结构：services是对象，下属service键对应服务数组
• 你预期的目标结构：services本身就是数组，每个数组成员为包含service键的对象，正确缩进的目标结构如下：

services:
  - service:
      serviceName: Service 1
      serviceDesc: Blah
  - service:
      serviceName: Service 2
      serviceDesc: Blah

你可以根据自己的需求选择保留现有结构或者切换到目标结构，两种情况的调用方法分别如下。

2. 保留现有YAML结构的调用方法 #

如果不修改现有结构，Nunjucks直接从services.service数组取值即可：

• 循环遍历所有服务：

{% for service in services.service %}
  <h3>{{ service.serviceName }}</h3>
  <p>{{ service.serviceDesc }}</p>
{% endfor %}

• 获取单个指定服务（比如取第一个服务）：

{% set firstService = services.service[0] %}
<!-- 调用属性 -->
{{ firstService.serviceName }}
{{ firstService.serviceDesc }}

3. 切换到目标YAML结构的实现方法 #

如果要使用你预期的结构，先修改Netlify CMS的config.yml对应字段配置，将services设置为列表类型，嵌套对象字段：

fields:
  - name: services
    label: 服务列表
    widget: list
    fields:
      - name: service
        label: 服务项
        widget: object
        fields:
          - { name: serviceName, label: 服务名称, widget: string }
          - { name: serviceDesc, label: 服务描述, widget: text }

配置修改完成后，Netlify CMS自动生成的YAML就会匹配你预期的结构，此时Nunjucks调用方法如下：

• 循环遍历所有服务：

{% for item in services %}
  <h3>{{ item.service.serviceName }}</h3>
  <p>{{ item.service.serviceDesc }}</p>
{% endfor %}

• 获取单个指定服务（比如取第二个服务）：

{% set targetService = services[1].service %}
{{ targetService.serviceName }}

额外优化建议 #

你目标结构里的service键属于冗余层级，可以直接去掉，将serviceName、serviceDesc直接设为services列表的字段，结构更简洁，调用也更方便：

services:
  - serviceName: Water Treatment
    serviceDesc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  - serviceName: Environmental Services
    serviceDesc: Lorem ipsum dolor sit amet, consectetur adipiscing eliy, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

此时调用单个服务直接写{{ services[0].serviceName }}即可。

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