Jekyll for 循环仅包装前两个元素

问题描述 投票:0回答:2
html css jekyll
2个回答
0
投票

像这样改变电影单曲:

<div class="grid__item2">
  <div class="card">
    <div class="card_left">
      <img src="{{ movie.poster }}" alt="{{ movie.title }}" />
    </div>
    <div class="card_right">
      <h1>{{ movie.title }}</h1>
      <div class="card_right__details">
        <ul>
          <li>{{ movie.year }}</li>
          <li>{{ movie.director }}</li>
          <li>{{movie.rating}} / 10</li>
        </ul>
        <div class="card_right__review">
          <p>{{ movie.description }}</p>
          <a href="{{movie.link}}" target='_blank'>Read more</a>
        </div>

      </div>
      </div>
    </div>
  </div>

最后你有两个太多了


0
投票
{% for movie in site.movies %} {% include moviesingle.html %} {% endfor %}

看起来不错。

但是,在 moviesingle.html 中,您关闭了两个额外的 div。如果您以结构化方式编写代码,如下所示:

        <div class="grid__item2">
            <div class="card">
                <div class="card_left">
                    <img src="{{ movie.poster }}" alt="{{ movie.title }}" />
                </div>
                <div class="card_right">
                    <h1>{{ movie.title }}</h1>
                    <div class="card_right__details">
                        <ul>
                            <li>{{ movie.year }}</li>
                            <li>{{ movie.director }}</li>
                            <li>{{movie.rating}} / 10</li>
                        </ul>
                        <div class="card_right__review">
                            <p>{{ movie.description }}</p>
                            <a href="{{movie.link}}" target='_blank'>Read more</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

那么一看代码就明白了。

© www.soinside.com 2019 - 2024. All rights reserved.