CODEWITHSUNDEEP
htmljekyll
Jeff Labour
Jeff Labour

Reputation: 41

How to access sub folder yaml files inside data folder in jekyll?

I make a small tour company site right now. I want to describe the activity of each of a given trip -

Each 3 days has to be wrap inside a div with span-4 class as follow:

<div class ="span-4">

    <h3>Day 1</h3>
    <h4>Departure and arrival</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>

    <h3>Day 1</h3>
    <h4>Departure and arrival</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>

    <h3>Day 1</h3>
    <h4>Departure and arrival</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>

</div>

I use data folder and loop as follow inside my yml file:

 {% for groups in site.data.tak-lampang %}
  <div class="span-4">
     {% for d in groups.day %}
       <h3>{{d.title }}</h3>
       <h2 class ="fi-marker">{{ d.direction }}</h2>
       <p>{{ d.description }}</p>
     {% endfor %}
  </div>
{% endfor %}

My yml files look like this 

- groups: 
    day:
       - title: "Day 1"
         direction: "A-B" 
         description: "Lorem ipsum......"
    day:    
       - title: "Day 2"
         direction: "B-C"
         description:"Lorem ipsum....."
    day:
       - title: "Day 3"
         direction: "C-D"
         description: "Lorem ipsum ...."

My output is this 

<div class ="span-4">
    <h3>Day 3</h3>
    <h4>C-D</h4>
    <p>Lorem ipsum...</p>
</div>

I kind of stuck now after many tries. Can someone point out where my mistake is ?

Upvotes: 0

Views: 1261

Answers (2)

David Jacquel
David Jacquel

Reputation: 52829

Two things : an error in yaml data file and a small refactoring

The error

Your assigning three time a value to the same key :

- groups: 
    day:
       - title: "Day 1"
         direction: "A-B" 
         description: "Lorem ipsum......"
    day:    
       - title: "Day 2"
         direction: "B-C"
         description:"Lorem ipsum....."
    day:
       - title: "Day 3"
         direction: "C-D"
         description: "Lorem ipsum ...."

groups.day can have only one value and in this case it's Day 3.

Correct organization of your data file can be :

groups:
    days:
        - title:       "Day 1"
          direction:   "A-B"
          description: "Lorem ipsum......"

        - title:       "Day 2"
          direction:   "B-C"
          description: "Lorem ipsum....."

        - title: "Day 3"
          direction: "C-D"
          description: "Lorem ipsum ...."

The refactoring

In your loop, you do {% for groups in site.data.tak-lampang %}. This means that you will have to replicate your code for each destination. If one day you want to change your html, you'll have to change it in every files.

It's better to abstract this to an include template.

1 - datas

Your data file is tak-lampang.yml. See code above.

2 - Tour page

The tour page is tak-lampang.html or whatever you want. It contains :

---
title: Tak Lampang dream tour
layout: default
dataFile: tak-lampang
---

{% include destinationDisplay.html %}

That's it !

3 - Display template

Now the display template _includes/destinationDisplay.html :

<div class="span-4">
{% for day in site.data[page.dataFile].groups.days %}
    <h3>{{day.title }}</h3>
    <h2 class ="fi-marker">{{ day.direction }}</h2>
    <p>{{ day.description }}</p>
{% endfor %}
</div>

Note the site.data[page.dataFile].groups.days that grab the correct datas depending on your page.dataFile variable in tak-lampang.html.

You can now change your display code in one file and that's good for maintenance ;-).

Good trip with Jekyll.

Upvotes: 2

Nagaraju Badaeni
Nagaraju Badaeni

Reputation: 900

groups: day:

title: "Day 1" direction: "A-B" description: "Lorem ipsum......"

title: "Day 2" direction: "B-C" description:"Lorem ipsum....."

title: "Day 3" direction: "C-D" description: "Lorem ipsum ...."

try with this

Upvotes: 0

Related Questions