我如何循环使用 Liquid 中的子集合或 110 中的 Javascript 的 YAML 集合？

Question

如何获取带有嵌套列表的 YAML 列表并输出嵌套项？

---
- fruit
  - banana
  - apple
  - orange
- vegetable
  - lettuce
  - broccoli
  - carrots
- bread
- cheese
- meat
  - beef
  - turkey
  - chicken

然后

<h1>Groceries</h1>
{% for item in groceries %}
{% comment %}
1. capture item
2. test for nested list
3. render nested items
{% endcomment %}
{{ item }}
{% endfor %}

Liquid 是否有过滤器来检查和遍历嵌套列表？

我应该创建一个带有回调的自定义 Javascript 过滤器吗？

Answer 1

我真的不确定，但是，它似乎有效。首先，我稍微修改了你的前面内容：

---
layout: main
groceries:
    - fruit:
        - banana
        - apple
        - orange
    - vegetable:
        - lettuce
        - broccoli
        - carrots
    - bread:
    - cheese:
    - meat:
        - beef
        - turkey
        - chicken
---

请注意，我在顶级项目中添加了 :，包括 'empty' 类型的项目。然后我像这样迭代：

{% for type in groceries %}
    {% for items in type %}
        <h2>{{ items[0] }}</h2>
        {% for item in items[1] %}
            {{ item }}<p>
        {% endfor %}
    {% endfor %}
{% endfor %}

循环的三个层次有三个我。 type 最终看起来像：{"fruit":[ array of stuff]}

所以我的前题可能不好？

Answer 2

好的，我想添加另一个答案。我可能会删除我的第一个，但现在想离开它。因此，我认为这与您的原始内容更接近：

---
layout: main
groceries:
    - fruit
        - banana
        - apple
        - orange
    - vegetable
        - lettuce
        - broccoli
        - carrots
    - bread
    - cheese
    - meat
        - beef
        - turkey
        - chicken
---

然后我这样做了：

{% for type in groceries %}
    {% assign items = type | split: " - " %}
    {% assign header = items[0] %}
    <h2>{{ header }}</h2>
    {% if items.length > 1 %}
        <ul>
        {% for item in items %}
            {% unless forloop.first %}
            <li>{{item}}</li>
            {% endunless %}
        {% endfor %}
        </ul>
    {% endif %}
    <p>
{% endfor %}

在循环中，items 是一个包含顶级项目和任何子项的数组。所以第一项总是最主要的（水果、蔬菜、肉类）。如果我们有 2 个或更多项目，这意味着我们有一个 'sublist'，您可以看到我如何循环遍历它们并跳过第一个项目。

想法？

我如何循环使用 Liquid 中的子集合或 110 中的 Javascript 的 YAML 集合？

How can I loop through a YAML collection with child collection in Lquid or Javascript in eleventy?

yaml

liquid

eleventy