Lesson 4: Front matter basics
We briefly covered front matter in the last lesson, but let’s take a closer look at it now.
Adding front matter to our home page
Open up eleventy-from-scratch/src/index.md in your text editor and take a look at what we’ve got:
---
title: 'Hello, world'
layout: 'layouts/home.html'
---
This is pretty _rad_, right?
Our existing front matter contains a title and layout key. If we were to convert this YAML into JSON, it would look like this:
{
"title": "Hello, world",
"layout": "layouts/home.html"
}
Let’s add some more front matter to this file. With index.md still open, add the following after the line that contains layout:
intro:
eyebrow: 'Digital Marketing is our'
main: 'Bread & Butter'
summary: 'Let us help you create the perfect campaign with our multi-faceted team of talented creatives.'
buttonText: 'See our work'
buttonUrl: '/work'
image: '/images/bg/toast.jpg'
imageAlt: 'Buttered toasted white bread'
The front matter of your index.md file should look like this now:
---
title: 'Hello, world'
layout: 'layouts/home.html'
intro:
eyebrow: 'Digital Marketing is our'
main: 'Bread & Butter'
summary: 'Let us help you create the perfect campaign with our multi-faceted team of talented creatives.'
buttonText: 'See our work'
buttonUrl: '/work'
image: '/images/bg/toast.jpg'
imageAlt: 'Buttered toasted white bread'
---
What’s all of this indenting business about? What we’re doing here is adding properties inside an intro. To do that in YAML, we indent items, instead of wrapping them in brackets like we do with JSON.
Let’s see how this looks as JSON again:
{
"title": "Hello, world",
"layout": "layouts/home.html",
"intro": {
"eyebrow": "Digital Marketing is our",
"main": "Bread & Butter",
"summary": "Let us help you create the perfect campaign with our multi-faceted team of talented creatives.",
"buttonText": "See our work",
"buttonUrl": "/work",
"image": "/images/bg/toast.jpg",
"imageAlt": "Buttered toasted white bread"
}
}
You can use JSON in your front matter in Eleventy, too. All you have to do is add json to the first --- like this: ---json.
We’re going to use YAML in our front matter for this course, but you can read more about using JSON in front matter in Eleventy’s docs.
Hopefully the JSON example makes that relationship make a bit more sense. What will help even more is putting it into practice, so let’s first add some front matter to our home page.
Open eleventy-from-scratch/src/_includes/layouts/home.html and replace the existing <article> element with this one:
<article class="intro">
<div class="[ intro__header ] [ radius frame ]">
<h1 class="[ intro__heading ] [ weight-normal text-400 md:text-600 ]">
{{ intro.eyebrow }}
<em class="text-800 md:text-900 lg:text-major weight-bold">{{ intro.main }}</em>
</h1>
</div>
<div class="[ intro__content ] [ flow ]">
<p class="intro__summary">{{ intro.summary }}</p>
<a href="{{ intro.buttonUrl }}" class="button">{{ intro.buttonText }}</a>
</div>
<div class="[ intro__media ] [ radius dot-shadow ]">
<img
class="[ intro__image ] [ radius ]"
src="{{ intro.image }}"
alt="{{ intro.imageAlt }}"
/>
</div>
</article>
What we have here is our page intro. It’s pre-wired up with class attributes ready for when we add some CSS later. But for now, let’s focus on those {{ }} sections.
Remember how our new content was indented under intro? This now gives us a handy shortcut for our templates. For example: if we want to read the summary, we use {{ intro.summary }}.
Wrapping up
As your front matter gets larger and more complex, indenting and structuring the content becomes more and more useful. We’re going to get into even more detail with that as the course progresses.
For now though, I hope you understand a bit more about front matter. Let’s move on and get that image working!