---
layout: post
title: Data Pages Demo
tagline: >
  Example use of json and yaml files in Jekyll pages

ydatafile: "yexample" # filename for yaml file
jdatafile: "jexample" # filename for json file

references:
  datafiles: http://jekyllrb.com/docs/datafiles/
  yexample: https://github.com/Materials-Informatics-Lab/research-pages/blob/gh-pages/_data/yexample.yaml
  jexample: https://github.com/Materials-Informatics-Lab/research-pages/blob/gh-pages/_data/jexample.json
---

# Using Data Files in Posts

[Data Files in Jekyll]({{page.references['datafiles']}}) provide site-wide access
to ``yaml`` and ``json`` files stored in the ``_data`` folder on your Github Pages branch.

# How to Data Files Work.

* ``yaml`` or ``json`` files are stored in the ``_data`` directory.

    Examples:
    ``_data/file-name.yml`` or ``_data/file-name.json``.
* Access the file content through {% raw %}``{{site.data['file-name']}}``{% endraw %} in posts and pages.

  ``file-name`` is a string thatcorresponds to the file name without the extension.  In the following
  examples we will use different files for the site data.

# Demo ``_data/yexample.yaml``

In this case, the file is [``_data/yexample.yaml``]({{page.references['yexample']}}) and can be accessed with the
syntax ``{% raw %}{{site.data['yexample']}}{% endraw %}``

**YAML Site Data**
{% capture y %}
{% highlight yaml %}
{{site.data['yexample']}}
{% endhighlight %}
{% endcapture %}
{{y}}



# Demo ``_data/jexample.json``

In this case, the file is [``_data/jexample.json``]({{page.references['jexample']}}) and can be accessed with the
syntax ``{% raw %}{{site.data['jexample']}}{% endraw %}``

**JSON Site Data**
{% capture y %}
{% highlight json %}
{{site.data['jexample']}}
{% endhighlight %}
{% endcapture %}
{{y}}

# Accessing Data Files Front Matter

Site variable names can be stored the post front-matter to access the data.  In this post the
following page variables were defined

{% capture y %}
{% highlight yaml %}
---
ydatafile: "yexample" # filename for yaml file
jdatafile: "jexample" # filename for json file
---
{% endhighlight %}
{% endcapture %}
{{y}}

The site data can be accessed as a hybrid of page and site data.

## YAML Data File from page variable

The variable ``{% raw %}{{site.data[page.ydatafile]}}{% endraw %}`` yields:

```
{{site.data[page.ydatafile]}}
```

## JSON Data File from page variable

The variable ``{% raw %}{{site.data[page.jdatafile]}}{% endraw %}`` yields:

```
{{site.data[page.jdatafile]}}
```