循环遍历 Jekyll/YAML 中的嵌套图像库数组

Question

为什么我不能在 Jekyll 中为这个项目组循环遍历 main: 图像数组？

/_data/navigation.yml:

- project:
  -
    categ: navigation
    name: Letterman
    age: 54
    feeling: swell
    thumb: thumb-letterman.jpg
    main:
      - image: image_1.jpeg

- project:
  -
    categ: navigation
    name: Carlin
    age: 67
    feeling: nice
    thumb: thumb-carlin.jpg
    main:
      - image: image_1.jpeg
      - image: image_2.jpeg
      - image: image_3.jpeg

navigation-page.html:

{% for navigation in site.data.navigation %}

    {% for project in navigation.project %}
        <div style="border:1px solid purple;margin:40px;">
            <p style="font-size:1em;color:purple">{{ project.name }}</p>

            {% for main in navigation.project %}
                <img src="{{ page.path }}{{ image }}" />
            {% endfor %}
        </div>
    {% endfor %}

{% endfor %}

输出应该是两个 div 行，每行都有项目的名称，第一行有一个图像，第二行有三个图像。

Answer 1

你的循环有问题。

{% for project in navigation.project %}

  {% for image in project.main %}

    <!-- This loop needed to loop within its parent -->

  {% endfor %}

{% endfor %}

我使用以下方法让它工作。

HTML（带值）

{% for item in site.data.navigation %}
<ul>
  <li>
    <p style="border: solid 1px red;">Project loop {{ forloop.index }}</p>
    {% for project in item.project %}
    <ul>
      <li>
        <p style="border: solid 1px green;">Sub Loop {{ forloop.index }}</p>
        <ul>
          <li style="border: solid 1px blue;">
            <p><strong>categ:-</strong> {{project.categ}}</p>
          </li>
          <li style="border: solid 1px blue;">
            <p><strong>name:-</strong> {{project.name}}</p>
          </li>
          <li style="border: solid 1px blue;">
            <p><strong>age:-</strong> {{project.age}}</p>
          </li>
          <li style="border: solid 1px blue;">
            <p><strong>feeling:-</strong> {{project.feeling}}</p>
          </li>
          <li style="border: solid 1px blue;">
            <p><strong>thumbnail:-</strong> {{project.thumb}}</p>
          </li>
          <li>
            <ol>
              {% for image in project.main %}
                <li style="border: solid 1px purple;">
                  <p>{{ image.image }}</p>              
                </li>          
              {% endfor %}
            </ol>            
          </li>
        </ul>
      </li>
    </ul>
    {% endfor %}
  </li>
</ul>
{% endfor %}

HTML（循环索引）

<div style="border: solid 4px purple; padding: 10px;">
  {% for item in site.data.navigation %}
    <div style="border: solid 3px red; padding: 10px; margin: 10px;">
      <pre>LOOP {{ forloop.index }}</pre>
      {% for project in item.project %}
        <div style="border: solid 2px green; padding: 10px; margin: 10px;">
          <pre>SUB LOOP {{ forloop.index }}</pre>
          {% for image in project.main %}
            <div style="border: solid 1px blue; padding: 10px; margin: 10px;">
              <pre>IMAGE {{ forloop.index }}</pre>
            </div>
          {% endfor %}
        </div>
      {% endfor %}
    </div>
  {% endfor %}
</div>

YAML

- project:
  -
    categ: navigation
    name: Letterman
    age: 54
    feeling: swell
    thumb: thumb-letterman.jpg
    main:
      - image: image_1.jpeg

- project:
  -
    categ: navigation
    name: Carlin
    age: 67
    feeling: nice
    thumb: thumb-carlin.jpg
    main:
      - image: image_1.jpeg
      - image: image_2.jpeg
      - image: image_3.jpeg