Jekyll 的 {% for %} 循环本身无问题，但 moviesingle.html 中存在未配对的 </div> 标签，导致 HTML 解析器提前关闭外层容器，使后续循环项脱离 <div id="wrapper">。
jekyll 的 `{% for %}` 循环本身无问题，但 `moviesingle.html` 中存在**未配对的 `` 标签**，导致 html 解析器提前关闭外层容器，使后续循环项脱离 `
`。
问题根源在于 moviesingle.html 文件中存在多余的、未匹配的闭合标签。观察原始代码：
<div class="grid__item2">
<div class="card">
<div class="card_left">
<img src="{{ movie.poster }}" alt="{{ movie.title }}" />
</div>
<div class="card_right">
<!-- ... 内容 ... -->
</div>
</div>
</div>
</div>
</div>末尾连续出现两个 </div>（</div></div>），而实际打开的 <div> 只有三个（.grid__item2、.card、.card_left/.card_right 各一），但结构上 .card_left 和 .card_right 是并列子元素，共同位于 .card 内——因此正确嵌套应为：
- <div class="grid__item2">
- <div class="card">
- <div class="card_left">...</div>
- <div class="card_right">...</div>
- </div> ← 关闭 .card
- <div class="card">
- </div> ← 关闭 .grid__item2
而原代码在 .card_right 内部已用 </div> 错误关闭了 .card_right（甚至可能误关 .card），再叠加两个额外 </div>，造成 HTML 树提前坍塌。浏览器解析时，前两次循环尚能勉强维持结构，但从第三次起，因父容器已被提前关闭，新生成的 .grid__item2 只能作为兄弟节点追加到 #wrapper 外部——这正是你看到“仅前两项在 wrapper 内”的根本原因。
✅ 正确写法（严格配对、缩进清晰）：
立即学习“前端免费学习笔记（深入）”；
<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>；
- 使用代码编辑器的括号高亮/标签匹配功能（如 VS Code、Sublime Text）实时验证嵌套；
- 运行 jekyll build 后检查 _site/movies/index.html 的实际 HTML 输出，确认 <div id="wrapper"> 是否完整包裹全部循环内容；
- 可借助 HTML Validator 在线校验生成页面，快速定位未闭合或错位标签。
? 提示：Jekyll 是静态站点生成器，不执行运行时 DOM 操作——所有结构错误均源于模板源码的语法缺陷，而非循环逻辑。养成「写一个标签、立刻补闭合」和「层级缩进对齐」的习惯，可大幅规避此类问题。
