11ty Second 11ty: Global Data files (JS and JSON)
In these two videos, we take 110 seconds each to discuss how to use 11ty's Global Data files to pull static data with JSON and dynamic (at build time) data with JavaScript.
11ty JSON Data Files
In this episode, were going to talk about Global data files. Specifically JSON data files. So, 110 seconds on the clock, Lets go!
11ty has a concept of the data cascade, and while we wont go into details on that in this video, we do need to mention that global data files are the lowest priority, so if you set something in a global data file and change it using the configuration API, the API will overwrite that data
To get started, we have a barebones 11ty site. All we have is an index file. In order to add global data, we need a directory for our files to live. The default is an _data
directory.
Well create that and a json data file. The name of the file will be the key well use to access the data in our templates. In this case, we'll name it siteSetting.json
.
Well make a super simple site settings data file. Global information we may want in multiple templates later on.
Then, well put a JSON object here with a few pieces of data. Were using an object here, but any valid JSON will work including an array.
{ name: Data Example, description: A data example site for 11ty second 11ty}
Once this is saved in, we can access it from our index template (or any other template... it's global, right?).
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1>11ty Second 11ty: Data Example</h1> {{ siteSetting.name }} {{ siteSetting.description }}</body></html>
Dynamic Content at Build time with 11ty JS Data Files
Now this works for static content, but what if we want to add some dynamic content per build say a date for the copyright in our footer.
We can do that with a Javascript Data file
Lets copy the siteSetting.json
file and move it to a settings.js
file.
From here, well reformat to use module.exports
and export this object
Now, well add a simple copyright property using JavaScripts built in Date method. Well generate the full date time and format it in our template.
module.exports = { "name": "settings", "description": "Settings for the bot", "date": new Date(),}
Then, we add this to our index.html
file
<body> <h1>11ty Second 11ty: Data Example</h1> {{ siteSetting.name }} {{ siteSetting.description }} {{ settings.date | date: "%Y" }}</body>
The date is fine, but what if you want to hit another API and get content? JS data files work well for simple cases of this, as well.
First, well make a new data file: pokemon.js
In here, well make an API call to the PokeAPI which is a great simple API for learning purposes. In this case, well use Axios (make sure its installed), but node-fetch or the latest node built-in fetch would work as well.
We export a function this time and return an array of items we wish to access. In this case. The response has a data
object with a results
array
const axios = require('axios');module.exports = async function () { // pokemon api call const response = await axios.get('https://pokeapi.co/api/v2/pokemon/?limit=151'); const pokemon = response.data.results; return pokemon}
<ol> {% for pokemon in pokemon %} <li>{{ pokemon.name }}</li> {% endfor %}</ol>
These are just the basics of using data files. Anything you can do in JSON or javascript, you can do in these files, including arrays, nesting, making calls to external APIs, transforming data and more.
Original Link: https://dev.to/brob/11ty-second-11ty-global-data-files-js-and-json-566o
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To