In these two movies, we take 110 seconds every to debate use 11ty’s World Knowledge recordsdata to drag static information with JSON and dynamic (at construct time) information with JavaScript.
11ty JSON Knowledge Recordsdata
On this episode, we’re going to speak about World information recordsdata. Particularly JSON information recordsdata. So, 110 seconds on the clock, Let’s go!
11ty has an idea of the data cascade, and whereas we gained’t go into particulars on that on this video, we do want to say that world information recordsdata are the bottom precedence, so if you happen to set one thing in a worldwide information file and alter it utilizing the configuration API, the API will overwrite that information
To get began, we’ve a barebones 11ty web site. All we’ve is an index file. In an effort to add world information, we’d like a listing for our recordsdata to reside. The default is an _data listing.
We’ll create that and a json information file. The title of the file would be the key we’ll use to entry the info in our templates. On this case, we’ll title it siteSetting.json.
We’ll make a brilliant easy web site settings information file. World info we might want in a number of templates afterward.
Then, we’ll put a JSON object right here with a number of items of information. We’re utilizing an object right here, however any legitimate JSON will work together with an array.
{
“title”: “Knowledge Instance”,
“description”: “A information instance web site for 11ty second 11ty”
}
As soon as that is saved in, we are able to entry it from our index template (or another template… it is world, proper?).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Appropriate" content material="IE=edge">
<meta title="viewport" content material="width=device-width, initial-scale=1.0">
<title>Doc</title>
</head>
<physique>
<h1>11ty Second 11ty: Knowledge Instance</h1>
{{ siteSetting.title }}
{{ siteSetting.description }}
</physique>
</html>
Dynamic Content material at Construct time with 11ty JS Knowledge Recordsdata
Now this works for static content material, however what if we wish to add some dynamic content material per construct… say a date for the copyright in our footer.
We are able to do this with a Javascript Knowledge file
Let’s copy the siteSetting.json file and transfer it to a settings.js file.
From right here, we’ll reformat to make use of module.exports and export this object
Now, we’ll add a easy copyright property utilizing JavaScript’s inbuilt Date technique. We’ll generate the complete date time and format it in our template.
module.exports = {
"title": "settings",
"description": "Settings for the bot",
"date": new Date(),
}
Then, we add this to our index.html file
<physique>
<h1>11ty Second 11ty: Knowledge Instance</h1>
{{ siteSetting.title }}
{{ siteSetting.description }}
{ date: "%Y" }
</physique>
The date is ok, however what if you wish to hit one other API and get content material? JS information recordsdata work effectively for easy instances of this, as effectively.
First, we’ll make a brand new information file: pokemon.js
In right here, we’ll make an API name to the PokeAPI which is a superb easy API for studying functions. On this case, we’ll use Axios (ensure that it’s put in), however node-fetch or the newest node built-in fetch would work as effectively.
We export a perform this time and return an array of things we want to entry. On this case. The response has a information object with a outcomes array
const axios = require('axios');
module.exports = async perform () {
// pokemon api name
const response = await axios.get('https://pokeapi.co/api/v2/pokemon/?restrict=151');
const pokemon = response.information.outcomes;
return pokemon
}
<ol>
{% for pokemon in pokemon %}
<li>{{ pokemon.title }}</li>
{% endfor %}
</ol>
These are simply the fundamentals of utilizing information recordsdata. Something you are able to do in JSON or javascript, you are able to do in these recordsdata, together with arrays, nesting, making calls to exterior APIs, reworking information and extra.