Eleventy Walk Through

Front matter and Markdown are ways to provide data and content for Eleventy to process into web pages, but to centralize and more tightly organize the data being used in a web site, Eleventy can use global data files. These are files located in a central location that can be used across all templates. These data files can be either JSON or JavaScript. Eleventy defaults to the _data folder for data files.

Using Global Data in a Page

Create the _data folder, then create the file _data/animalList.json containing an array :

[
    "lion",
    "zebra",
    "cat",
    "wolf",
    "dog",
    "gorilla",
    "tapir"
]
			

Create the file animals.html in the project root. The data contained in _data/animalList.json will automatically be made available by Eleventy as animalList (matching the data file name).

---
title: Animals
---
{% include _head.html %}
<h1>{{ title }}</h1>
<ul>
    {% for animal in animalList -%}
    <li>{{ animal }}</li>
    {% endfor -%}
</ul>
{% include _foot.html %}
			

A new folder _site/animals should appear, with an index.html file. Inside the body tag should be seen :

<h1>Animals</h1>
<ul>
    <li>lion</li>
    <li>zebra</li>
    <li>cat</li>
    <li>wolf</li>
    <li>dog</li>
    <li>gorilla</li>
    <li>tapir</li>
    </ul>
<p>Footer text</p>
			

Global Data in a Subfolder

Create the folder _data/mammals. Move _data/animalList.json into this folder. This data will now be available as mammals.animalList.

---
title: Animals
---
{% include _head.html %}
<h1>{{ title }}</h1>
<h2>Mammals</h2>
<ul>
    {% for animal in mammals.animalList -%}
    <li>{{ animal }}</li>
    {% endfor -%}
</ul>
{% include _foot.html %}
			

After the site is rebuilt, the _site/animals/index.html file shoud still contain the same animal list.

Accessing standard JSON data

Using JSON is not limited to an array, accessing object properties is codetty straightforward. Edit the file _data/mammals/animalList.json :

{
    "big": [
        "lion",
        "zebra",
        "wolf",
        "dog",
        "gorilla",
        "tapir"
    ],
    "small": [
        "cat",
        "rabbit",
        "mouse"
    ]
}
			

Edit the animals.html file to add a new list, and to drill down into the data a little more :

---
title: Animals
---
{% include _head.html %}
<h1>{{ title }}</h1>
<h2>Mammals</h2>
<ul>
    {% for animal in mammals.animalList.big -%}
    <li>{{ animal }}</li>
    {% endfor -%}
</ul>
<ul>
    {% for animal in mammals.animalList.small -%}
    <li>{{ animal }}</li>
    {% endfor -%}
</ul>
{% include _foot.html %}
			

Inside _site/animals/index.html, inside the body tag should now be seen:

<h1>Animals</h1>
<h2>Big</h2>
<ul>
    <li>lion</li>
    <li>zebra</li>
    <li>wolf</li>
    <li>dog</li>
    <li>gorilla</li>
    <li>tapir</li>
    </ul>
<h2>Small</h2>
<ul>
    <li>cat</li>
    <li>rabbit</li>
    <li>mouse</li>
    </ul>
<p>Footer text</p>
				

HTML in JSON

HTML can be included in JSON data like any other text, which is especially useful since content items don't always have the same structure. HTML does have to be escaped in JSON, and then be piped through the safe filter to work correctly.

Create _data/intro.json :

[
    "<h2 class=\"title\">Welcome to our <em>Animals</em> site.</h2>\n<p>\n<a href=\"https://www.google.com/?q=animals\" target=\"_blank\">Use Google to learn even more about animals</a>.\n</p>",
    "<h3 class=\"subtitle\">Animal types</h3>\n<p>This site is <em>somewhat</em> organized by animal type.</p>"
]
			

Create _src/intro.html

{% include _head.html %}
<h1>Intro</h1>
{% for item in intro -%}
{{ item | safe }}
{% endfor -%}
{% include _foot.html %}
			

The resulting _site/intro/index.html should include this :

<h1>Intro</h1>
<h2 class="title">Welcome to our <em>Animals</em> site.</h2>
<p>
<a href="https://www.google.com/?q=animals" target="_blank">Use Google to learn even more about animals</a>.
</p>
<h3 class="subtitle">Animal types</h3>
<p>This site is <em>somewhat</em> organized by animal type.</p>