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

Posted 2023-03-06

【中文标题】如何在 Liquid 或 Javascript 中循环使用 YAML 集合和 110 中的子集合？

【英文标题】：How can I loop through a YAML collection with child collection in Lquid or Javascript in eleventy?

【发布时间】：2021-10-30 23:41:22

【问题描述】：

如何获取带有嵌套列表的 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 过滤器吗？

【参考方案1】：

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

---
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 个或更多项目，这意味着我们有一个“子列表”，您可以看到我如何循环它们并跳过第一个项目。

想法？

【讨论】：

正是我所倾向于的，但无法有条件地遍历集合。谢谢！

【参考方案2】：

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

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

请注意，我已在***项目中添加了:，包括用于“空”类型的项目。然后我像这样迭代：

% 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]

所以也许我的前线不太好？