Making most out of _data directory in Jekyll

Jekyll 1.3.0 comes with exciting new features especially the use of \_data directories. The \_data directory is very useful in cases where you want to store metadata related to your site or blog and want to load it in runtime. Earlier people used to put this in \_config.yml which was kind of a hack.

How can you make most out of _data directory ?

If you’ve a file trucks.yaml under \_data, then you can access it with

 
{% for truck in site.data.trucks %}

So you can have members.yaml, projects.yaml, products.yaml under \_data, and access them respectively as

 
site.data.members
site.data.projects 
site.data.products

For instance, this current site itself makes use of \_data directory extensively. Have a look at Projects section.

The entire left navigation of Projects section is driven dynamically through a simple YAML file in \_data directory, which is projects.yaml and looks like:

---
- project: Hermes
  category: Android
  publish: yes
  description: Hermes is an attempt to provide a sense of security to all the travelers 
  of all over the world and especially the women in India who use the public transport to 
  commute to their work place and back home.
  
- project: Silverlight Organization Chart for SharePoint
  category: SharePoint
  publish: yes
  description: A silverlight Chart control which retrieves data from the SharePoint list. 
  
- project: STP Inspector
  category: SharePoint
  publish: yes
  description: STP Inspector is an site template inspector for WSS/MOSS 2007. 
  It analyzes a site template file (.stp) and basically shows its dependencies on the site 
  features and site collection features.

Now what I can in Jekyll is simply refer to Project Name, category, description using the site variable array as site.data.projects and loop through it using

 
{% for project in site.data.projects %}
{{ project.project }}
{% endfor %}

Using the simple structure above, I have dynamically generated both my left navigation and content page. In future, if I work on a new project, I just need to edit the projects.yaml file and Jekyll would automatically update the left navigation and content page.

This is the simple code of generating left navigation which I have done in my includes file projects-left.html

 
<div id="projects">
    <p class="single"><a href="/projects">Projects</a></p>

    {% for category in site.data.categories %}
        <p class="project-category">{{ category.category }}</p>
            <ul class="subcategory">

                {% for project in site.data.projects %}
                
                    {% if project.category == category.category and project.publish == true %}
                        <li><a href="/projects/{{ project.project }}.html">{{ project.project }}</a></li>
                    {% endif %}

                {% endfor %}
        </ul>
    {% endfor %}

</div>

This is how I generate my content page which nicely generates the project names along with descriptions. You can have a look at source here

 
{% for project in site.data.projects %}
                    
    {% if project.publish == true %}
        <strong><a href="/projects/{{ project.project }}.html">{{ project.project }}</a></strong>
        
        <span class="tag-project">{{ project.category }}</span>
        {{ project.description }}
        <hr/>
    {% endif %}
        
{% endfor %}
</div>

This is where \_data directory comes in handy where you don’t want to embed little pieces of information regarding your site in dirty repeating html. Using \_data directory, you can make the information which is going to change over the period of time structured and also provide dynamism at the same time.