Jekyll/YAML의 중첩 된 이미지 갤러리 배열을 반복합니다

Question

왜 지킬의이 프로젝트 그룹에 대해 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 행 프로젝트의 이름을 각각이어야 첫 번째 행은 하나 개의 이미지, 및 제 2 열을했을 세 개의 이미지가 있습니다.

Answer 1

루핑에 문제가있었습니다.

{% for project in navigation.project %} 

    {% for image in project.main %} 

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

    {% endfor %} 

{% endfor %} 

다음을 사용하여이 기능을 사용할 수 있습니다.

{% 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 (루프 인덱스) (값)

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 

이 작동