jekyllliquidjekyll-bootstrap

How do I use a for Ioop for a Jekyll collection?

I am attempting to implement some bootstrap features into an existing themed Jekyll site. I want to add some of these features in markdown so others can more easily use them.

Below is an example of how I want to add a Bootstrap accordion using a collection loop. This code is included in the _include folder:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> 

<div class="accordion accordion-flush" id="accordionFlushExample">
    {% for item in site.accordion %}
        <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed accordion{{ forloop.index }}" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                {{ accordion.title }}
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body" for="accordion{{ forloop.site }}">{{ accordion.content | markdownify }}</div>
        </div>
        </div>
    {% endfor %}
</div>

Then, on my index page I have added:

{% include accordion.html %}
---
accordion: 
  - title: this is item 1
    content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  - title: this is item 2
    content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
---

However, the website shows this code and unformatted:

accordion failing

I can see Boostrap is already functioning but my custom variable is not. I assume there is some form of syntax error or I am missing code in a particular location (e.g. _config.yml).

How do I get Jekyll to recognize the accordion and format it in Bootstrap?

Solution

  • Use {% for accordion in page.accordion %}. You add the acccordion content in the front matter of the page, see code below.

    <div class="accordion accordion-flush" id="accordionFlushExample">
    {% for accordion in page.accordion %}
        <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed accordion{{ forloop.index }}" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                {{ accordion.title }}
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body" for="accordion{{ forloop.site }}">{{ accordion.content | markdownify }}</div>
        </div>
        </div>
    {% endfor %}
</div>

    Within the page, move the {% include accordion.html %} below the front matter.

    ---
layout: post
title:  "Welcome to Jekyll!"
date:   2022-10-20 20:57:14 +0200
accordion: 
  - title: this is item 1
    content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  - title: this is item 2
    content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
---

{% include accordion.html %}

    Result:

    enter image description here