如何在Liquid模板语言的if语句中嵌套使用for循环？

Hey there! Let's get this Jekyll + Liquid setup working for you. First, we'll structure your location data in a JSON file (which Jekyll can natively load from the _data folder), then write the Liquid template to generate the exact HTML you're expecting.

Step 1: Create the JSON Data File #

First, make a _data folder in your Jekyll project if you don't have one already. Inside it, create a file named locations.json with this structure (matching your expected output):

[
  {
    "name": "University Union Neighborhood",
    "spots": [
      {"value": "The Avenue", "display_name": "The Avenue", "chk_id": "chk1"},
      {"value": "Chick Fil-A", "display_name": "Chick Fil-A", "chk_id": "chk2"},
      {"value": "805 Kitchen", "display_name": "805 Kitchen", "chk_id": "chk3"},
      {"value": "805 Cafe", "display_name": "805 Cafe", "chk_id": "chk31"},
      {"value": "Myron's", "display_name": "Myron's - NEW THIS FALL", "chk_id": "chk4"},
      {"value": "Lucys", "display_name": "Lucy's Juice", "chk_id": "chk5"},
      {"value": "Sandwich Factory", "display_name": "Sandwich Factory", "chk_id": "chk6"},
      {"value": "Mustang Station", "display_name": "Mustang Station", "chk_id": "chk7"},
      {"value": "Red Radish", "display_name": "Red Radish", "chk_id": "chk8"},
      {"value": "Starbucks-UU", "display_name": "Starbucks University Union", "chk_id": "chk9"}
    ]
  },
  {
    "name": "Kennedy Library Neighborhood",
    "spots": [
      {"value": "Campus Market", "display_name": "Campus Market", "chk_id": "chk10"},
      {"value": "Starbucks-CM", "display_name": "Starbucks Campus Market", "chk_id": "chk11"},
      {"value": "Julians", "display_name": "Julian's Cafe Bistro in Kennedy Library", "chk_id": "chk12"},
      {"value": "Tacos To-Go Express", "display_name": "Tacos To-Go Express", "chk_id": "chk13"}
    ]
  },
  {
    "name": "Poly Canyon Village Neighborhood",
    "spots": [
      {"value": "Einstein Bros. Bagels", "display_name": "Einstein Bros. Bagels", "chk_id": "chk14"},
      {"value": "Jamba Juice", "display_name": "Jamba Juice", "chk_id": "chk15"},
      {"value": "Tacos To-Go Mexican Grill", "display_name": "Tacos To-Go Mexican Grill", "chk_id": "chk16"},
      {"value": "Village Market", "display_name": "Village Market", "chk_id": "chk17"}
    ]
  },
  {
    "name": "Support Units",
    "spots": [
      {"value": "Catering", "display_name": "University Catering", "chk_id": "chk18"},
      {"value": "Concessions", "display_name": "Mustang Concessions", "chk_id": "chk19"},
      {"value": "Curbside", "display_name": "Curbside Grill Food Truck", "chk_id": "chk20"},
      {"value": "Central Coaster", "display_name": "Central Coaster Food Truck - NEW THIS FALL", "chk_id": "chk21"},
      {"value": "Starbucks Coffee Truck", "display_name": "Starbucks Coffee Truck - NEW THIS FALL", "chk_id": "chk22"}
    ]
  }
]

Step 2: Write the Liquid Template #

Now in your Jekyll page or include file, add this Liquid code to render the exact HTML structure you shared:

{% assign locations = site.data.locations %}

<div>
  {% for neighborhood in locations %}
    {% if neighborhood.name != "Support Units" %}
      <p><strong>{{ neighborhood.name }}</strong></p>
      <div class="label_input_grouping">
        {% for spot in neighborhood.spots %}
          <label>
            <input 
              type="checkbox" 
              name="location" 
              value="{{ spot.value }}" 
              onclick="document.getElementById('{{ spot.chk_id }}').checked = this.checked;"
            />
            {{ spot.display_name }}
          </label>
        {% endfor %}
      </div>
    {% endif %}
  {% endfor %}
</div>
<div class="options">
  {% assign support_units = site.data.locations | where: "name", "Support Units" | first %}
  <p><strong>{{ support_units.name }}</strong></p>
  <div class="label_input_grouping">
    {% for spot in support_units.spots %}
      <label>
        <input 
          type="checkbox" 
          name="location" 
          value="{{ spot.value }}" 
          onclick="document.getElementById('{{ spot.chk_id }}').checked = this.checked;"
        />
        {{ spot.display_name }}
      </label>
    {% endfor %}
  </div>
</div>

Step 3: Troubleshooting Common Issues #

If it's not working, check these common pitfalls:

• JSON File Placement: Make sure locations.json is in the _data folder at the root of your Jekyll project. Jekyll automatically loads files here into site.data.
• JSON Syntax: Double-check your JSON for typos (missing commas, mismatched brackets, unescaped quotes). A single syntax error will break the whole load.
• Liquid Syntax: Ensure you have matching {% for %} and {% endfor %} tags, and that variable names are case-sensitive (e.g., spot.value vs Spot.Value won't work).
• Jekyll Serve Logs: Run jekyll serve in your terminal and look for error messages—they'll tell you if the JSON is invalid or if Liquid can't find the data.
• Verify Data Loading: Add {{ site.data.locations | inspect }} to your page to confirm Jekyll is pulling in the JSON correctly.

That should generate exactly the HTML you're expecting. Let me know if you hit any specific snags!

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