Jekyll中Bootstrap-Carousel无法渲染front-matter数据求助

Let's break down why your carousel isn't pulling in the image and text data from your front-matter, and walk through the fixes step by step:

1. You're looping through hash keys instead of values #

Your front-matter defines carousel as a hash/dictionary (with keys a, b, c), but your Liquid loop is treating each entry as the value object directly. In Liquid, when you loop over a hash, each iteration gives you a key-value pair—so news in your loop is actually the key (a, b, or c), not the object containing image and text. That's why news.image and news.text return empty.

Fix Option 1: Convert front-matter to an array #

Change your front-matter to use an array of objects instead of named keys. This is the most straightforward approach:

---
carousel:
  - image: home/athenaBeta.jpeg
    text: random text 1
  - image: home/transport.jpeg
    text: |
      random text 2
  - image: home/coffee.jpeg
    text: |
      random text 3
---

Fix Option 2: Use hash_values filter in the loop #

If you want to keep the named keys in your front-matter, modify the loop to iterate over the hash's values instead of the keys:

{% for news in page.carousel | hash_values %}

2. Active class uses incorrect index #

Liquid's forloop.index starts at 1, not 0. Your current condition {% if forloop.index == 0 %}active{% endif %} will never be true, so no slide gets the active class—this breaks Bootstrap's carousel initialization entirely.

Fix: Use forloop.first or adjust the index #

Replace the active class condition with either:

{% if forloop.first %}active{% endif %}

Or:

{% if forloop.index == 1 %}active{% endif %}

3. Redundant capture for image #

Your capture block for the image is unnecessary. You can directly reference news.image once the loop is fixed, no extra steps needed.

Corrected hero-carousel.html #

Putting it all together (using the array front-matter approach):

<div id="carousel" class="carousel slide" data-ride="carousel" pause="false">
  <div class="carousel-inner text-center">
    {% for news in page.carousel %}
      <div class="item img-cover img-fixed {% if forloop.first %}active{% endif %}" style="background-image:url({{ news.image }})">
        <h2>{{ news.text }}</h2>
      </div>
    {% endfor %}
  </div>
  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="fa glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="fa glyphicon-chevron-right"></span>
  </a>
  <a class="arrow-down" href="#content">
    <span class="fa glyphicon-chevron-down"></span>
  </a>
</div>

Quick Additional Checks #

• Verify your image paths are correct relative to your site's root (adjust them if using Jekyll's asset helpers like {{ site.baseurl }}/{{ news.image }} if needed).
• If you want to preserve line breaks from your multi-line text fields, use {{ news.text | newline_to_br }} instead of plain {{ news.text }}.

内容的提问来源于stack exchange，提问作者Kayote