Adding global data

Page and template data are great when adding unique data. Directory data is great for sharing data between specific pages. But what if you need to add data to every page? That’s where global data files come in.

To use global data files, we need a directory to store them. Inside the src directory, create a new directory named _data—11ty’s default data directory name. This can store multiple data files. Each file in this directory will give access to its data to any template using a key with the same name as its filename. For our site, let’s add some general site information and add the ability to access it from multiple files.

Create a new file in the _data directory named site.json. This file will have general information about the site, including the site name and the copyright date to be displayed in the footer:

{
   "name": "My Awesome Site",
   "copyright": "2022"
}

With this data in hand, let’s insert it into our templates.

In the site head—located in src/_templates/includes/header.html—we’ll update the title. Currently, it’s just a hardcoded string. Let’s have it pull the page title and the site title:

<title>{{ title }} – {{ site.name }}</title>

In the footer—located in src/_templates/includes/footer.html—let’s adjust the copyright information:

<footer class="footer">
    <p>&copy; {{ site.name }} {{ site.copyright }}</p>
</footer>

Now the information is all changeable from one location whenever it needs to be updated.

Adding dynamic global data

Keen readers will have noticed something slightly off with that last section. The copyright date is already out of date. I’m writing this book at the end of 2022, but you’re not reading it then. To change this for the site, we would need to go into our footer each year and change the date. However, 11ty’s JavaScript data files can update this for us.

While JSON can be a handy format for simple data, it can be extended by writing it as JavaScript. Any code written in a JavaScript data file will be run each time the site builds. If we update the site’s copyright data with a script, it means the site will just need to be rebuilt each year, and no content change will be needed.

What do you mean “built”?

11ty has no client-side JavaScript code generated by default. Any JavaScript we write for data files will run when the HTML for the site is generated by 11ty—often referred to as “at build time.” This happens when the default eleventy command is run in the terminal. This usually happens in your hosting provider, but can be run locally as well.

To start the process, let’s convert site.json over to site.js. This will immediately break the running of the terminal process. This is not a proper JavaScript module export.

Since the file is now a JavaScript file, it needs to be refactored to export the object instead of just containing the JSON object.

module.exports = {
   "name": "My Awesome Site",
   "copyright": "2022"
}

When you run 11ty again, it should work as it did before.

Now that this is a JavaScript file, any Node.js JavaScript can be run from within the file. For our use, we can use the built-in Date functionality in JavaScript to get the current date and save the year string as a globally accessible variable named copyright:

module.exports = {
   "name": "My Awesome Site",
   "copyright": new Date().getFullYear()
}

Now, the copyright date in the footer should display the current year instead of 2022. This is a simple example of using dynamic data in 11ty, but anything Node.js can do, 11ty’s JavaScript data files can also do. This includes things such as reading files from the filesystem, querying APIs, and transforming data.