Data Pages Demo
Using Data Files in Posts
Data Files in Jekyll provide site-wide access
to yaml and json files stored in the _data folder on your Github Pages branch.
How to Data Files Work.
-
yamlorjsonfiles are stored in the_datadirectory.Examples:
_data/file-name.ymlor_data/file-name.json. -
Access the file content through
{{site.data['file-name']}}in posts and pages.file-nameis 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 and can be accessed with the
syntax {{site.data['yexample']}}
YAML Site Data
{"description"=>"Segmented $\\alpha&-$\\beta$ Titanium micrographs from Pete Collins at UNT.\n", "gist"=>"https://gist.github.com/tonyfast/afafb762798e9204bac4", "volumefraction"=>0.60206419148851, "tags"=>["Experiment1", "AnalysisMagic"], "units"=>[{"x"=>10, "y"=>10}], "flickr"=>{"view"=>"https://www.flickr.com/photos/tonyfast/12972815434/in/set-72157641959260094", "set"=>"https://www.flickr.com/photos/tonyfast/sets/72157641959260094/"}, "author"=>[{"name"=>"Tony Fast"}, {"email"=>"tony.fast@gmail.com"}], "thumb"=>"https://farm3.staticflickr.com/2689/12972815434_734b24ef1d_q.jpg"}Demo _data/jexample.json
In this case, the file is _data/jexample.json and can be accessed with the
syntax {{site.data['jexample']}}
JSON Site Data
{"gist"=>"https://gist.github.com/tonyfast/afafb762798e9204bac4", "description"=>"Segmented $\\alpha&-$\\beta$ Titanium micrographs from Pete Collins at UNT.\n", "volumefraction"=>0.60206419148851, "tags"=>["Experiment1", "AnalysisMagic"], "author"=>[{"name"=>"Tony Fast"}, {"email"=>"tony.fast@gmail.com"}], "units"=>[{"y"=>10, "x"=>10}], "flickr"=>{"set"=>"https://www.flickr.com/photos/tonyfast/sets/72157641959260094/", "view"=>"https://www.flickr.com/photos/tonyfast/12972815434/in/set-72157641959260094"}, "thumb"=>"https://farm3.staticflickr.com/2689/12972815434_734b24ef1d_q.jpg"}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
---
ydatafile: "yexample" # filename for yaml file
jdatafile: "jexample" # filename for json file
---The site data can be accessed as a hybrid of page and site data.
YAML Data File from page variable
The variable {{site.data[page.ydatafile]}} yields:
{"description"=>"Segmented $\\alpha&-$\\beta$ Titanium micrographs from Pete Collins at UNT.\n", "gist"=>"https://gist.github.com/tonyfast/afafb762798e9204bac4", "volumefraction"=>0.60206419148851, "tags"=>["Experiment1", "AnalysisMagic"], "units"=>[{"x"=>10, "y"=>10}], "flickr"=>{"view"=>"https://www.flickr.com/photos/tonyfast/12972815434/in/set-72157641959260094", "set"=>"https://www.flickr.com/photos/tonyfast/sets/72157641959260094/"}, "author"=>[{"name"=>"Tony Fast"}, {"email"=>"tony.fast@gmail.com"}], "thumb"=>"https://farm3.staticflickr.com/2689/12972815434_734b24ef1d_q.jpg"}
JSON Data File from page variable
The variable {{site.data[page.jdatafile]}} yields:
{"gist"=>"https://gist.github.com/tonyfast/afafb762798e9204bac4", "description"=>"Segmented $\\alpha&-$\\beta$ Titanium micrographs from Pete Collins at UNT.\n", "volumefraction"=>0.60206419148851, "tags"=>["Experiment1", "AnalysisMagic"], "author"=>[{"name"=>"Tony Fast"}, {"email"=>"tony.fast@gmail.com"}], "units"=>[{"y"=>10, "x"=>10}], "flickr"=>{"set"=>"https://www.flickr.com/photos/tonyfast/sets/72157641959260094/", "view"=>"https://www.flickr.com/photos/tonyfast/12972815434/in/set-72157641959260094"}, "thumb"=>"https://farm3.staticflickr.com/2689/12972815434_734b24ef1d_q.jpg"}
References
1. http://jekyllrb.com/docs/datafiles/
1. https://github.com/Materials-Informatics-Lab/research-pages/blob/gh-pages/_data/yexample.yaml
1. https://github.com/Materials-Informatics-Lab/research-pages/blob/gh-pages/_data/jexample.json