像这样改变电影单曲:
<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>
最后你有两个太多了
{% 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>
那么一看代码就明白了。