SchmidtHappens

I moved to using data files for this site. Let me walk you through how and why I decided to do that.

I was perusing the Jekyll documentation when I came across the section about data files. As soon as I read through the docs, I realized I had the perfect place to use them. In fact, I had several candidates that could be converted to using data files.

I decided that I would move the content in my site footer - bookshelf, sites & resource, and social outlets - to data files. In order to do this, I created a _data/ folder in the root directory of my sites project.

Next, I created a YAML file for each of the sections. The files themselves are pretty basic. Here's the resources.yml file as an example.

 1 - name: Font Squirrel
 2   title: Handpicked fonts for graphic designers
 3   url: http://www.fontsquirrel.com
 4 
 5 - name: Google Web Fonts
 6   title: Hundreds of free, open-source fonts optimized for the web
 7   url: http://google.com/fonts
 8 
 9 - name: normalize.css
10   title: Make browsers render all elements more consistently
11   url: http://necolas.github.io/normalize.css/

Now, in my HTML files, I can reference this data using site.data.data_file_name. You would need to change data_file_name to the name of the file you created under the _data/ folder. In my example, it would be site.data.resources.

Looping through the collection is done just like any other collection with the Liquid Templating Language.

 1 <section class="well">
 2   <header>
 3     <h3>Sites &amp; Resources</h3>
 4   </header>
 5   <ul class='unstyled'>
 6     {% for resource in site.data.resources %}
 7       <li>
 8         <a href='{{ resource.url }}' target='_blank' title='{{ resource.title }}'>{{ resource.name }}</a>
 9       </li>
10     {% endfor %}
11   </ul>
12 </section>

And that's really all there is to it. This is a great way to clean things up a bit and makes it incredibly easy to add entries anytime I want.

Something missing? Need more explanation? Let me know in the c-c-c-comments!