0

我将 Timber (twig) 与 Wordpress 和 ACF 一起使用。

我想创建这个结构：

<div class="section" id="section1">
      <div class="slide slide0">
              <div class="image-container" data-type="home" data-currentslide="1" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="img/myimage.jpg">
              </div>
      </div>
      <div class="slide slide1">
              <div class="image-container" data-type="project" data-currentslide="2" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="img/myimage.jpg">
              </div>
      </div>
      <div class="slide slide2">
              <div class="image-container" data-type="project" data-currentslide="3" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="img/myimage.jpg">
              </div>
      </div>
  </div>
  <div class="section" id="section2">
      <div class="slide slide0">
              <div class="image-container" data-type="project" data-currentslide="1" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="img/myimage.jpg">
              </div>
      </div>
      <div class="slide slide1">
              <div class="image-container" data-type="project" data-currentslide="2" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="img/myimage.jpg">
              </div>
      </div>
      <div class="slide slide2">
              <div class="image-container" data-type="project" data-currentslide="3" data-maxslides="3"  data-title="DEMO" data-project="Sweater Collection (Hamburg, 2017)">
                  <img src="img/myimage.jpg">
              </div>
      </div>
  </div>

但是对于data-type属性，我需要为第一部分添加主页并将项目添加到另一部分。我尝试使用父循环索引，但这不起作用。

data-type="{% if loop.parent.loop.index0 %}home{% else %}project{% endif %}"

在上下文中 ：

{% for section in sections %}
            <div class="section" id="section{{ loop.index }}">
                {% for slide in section.get_field('project_imgs') %}
                  <div class="slide slide{{ loop.index0 }}">
                      <div class="image-container" data-type="{% if loop.parent.loop.index0 %}home{% else %}project{% endif %}" data-currentslide="{{ loop.index }}" data-maxslides="{{ section.get_field('project_imgs')|length }}" data-title="{{ section.project_title }}" data-project="{{ section.project_legend }}">
                          <img src="{{site.theme.link}}/assets/img/samples/mac-web.jpg">
                      </div>
                  </div>
                {% endfor %}
            </div>
        {% endfor %}
4

1 回答 1

1

您需要与“0”进行比较，并and在第二个循环索引上进行：

data-type="{% if loop.parent.loop.index0 == 0 and loop.index0 == 0 %}home{% else %}project{% endif %}"

这是一个twigfiddle，用于显示您关注的工作部分： https ://twigfiddle.com/n9ucvn

于 2017-06-23T05:06:30.990 回答