Saturday Afternoon
Holy hell, I think it's finally time to get into templating and layouts.
Eleventy's documentation is kind of bad at explaining what exactly templates and layouts are, which isn't really helped by the fact that these two terms are somewhat interchangeable. Here's my more palatable summary:
- A template contains what you would think of as the "content". If you're typing a blog post, this is where the words go.
- A layout is more used to define the structure of the site, plus might include elements that don't really change from page to page. So this could include the site header and would specify where that header goes vis-a-vis the content.
I wanted to start super-simple just to make sure I had the basic idea down. To that end, I took Chapter 1 of my Pride & Prejudice and basically just cut it in half. For now, the breadcrumb navigation, title, content, and page navigation are staying in the template; everything else was straight copy-pasted into a new layout file.
The layout file gets saved to _input/_includes/single-main.html (more on this naming convention later). I'm oversimplifying for clarity, but mine looks something like this:
<!DOCTYPE html>
<head> [HEAD CONTENT] </head>
<body>
<header>
[SITE TITLE & RANDOM LINE]
</header>
<main>
</main>
</body>The line is important, because that's going to tell Eleventy where it should insert your template content. I don't exactly know how, I just assume Eleventy is looking out for that tag.
(It's also not HTML. I think in this case it's something called Liquid that handles that line? This is admittedly all over my head.)
And then for my template:
---
layout: single-main.html
---
<div> [BREADCRUMBS] </div>
<h2> Chapter 1: Much Ado About Bingley </h2>
<p> [SUMMARY] </p>
<p> [SUMMARY] </p>
<p> [SUMMARY] </p>
<div> [PAGE NAVIGATION] </div>The only thing unusual about this is the part in dashes up top. Eleventy calls this front matter, which is a term it's been throwing around since the Get Started guide in a way that suggests we all know what it is. This is something I expect to get more familiar with because it seems like it's a big part of this process, but for now I will tentatively suggest that the front matter is used to define parts of the template and pass them to the layout.
Right now, the front matter only references the layout file I made. When I build this, Eleventy looks at this template and goes "okay, put it into that layout". Combined, the two make a complete webpage, like placing the final piece in a jigsaw puzzle.
(By default, Eleventy will look for layouts in the _include folder, which should be within whatever our input folder is. That's why we don't need the full file path here.)
So, why did I call this layout single-main.html? I'm doing this specifically because of how I break my site into all these boxes. On any page, I have two questions to ask:
- Do I want one big container for the main content, or do I want to break it into sections?
- Do I want to include the extra column on the side or not?
The answers to these questions can determine whether I'm using <main> or <section>, as well as how many <div>s I have in play. So my thinking is, I'll create a handful of layouts to account for these factors, and just call the one I need in the front matter. single-main.html indicates no side column and no sections. I then created columns-main.html from one of my existing columned pages, just to see how it would look.
By changing the layout referenced in the front matter, I can call in whichever one I want:
Also, you might remember back when we started we were given the command npx @11ty/eleventy --serve, which ran a local web server so we could view our files in a browser. If we run this after a build, and navigate to a page, then when we save changes to the page the browser will automatically refresh it. This made it really easy to just update the layout referenced in the template and snap the two screenshots above. Credit where it's due.
There's more work to be done of course. The sidebar content is currently hard-coded into the layout, meaning it's going to be the same for every page that uses the columned layout. I'm going to need to find some way in the template to split up sidebar content from main content. Ideally it would also be nice if all my navigation was built into the layout and could be generated by Eleventy automatically. Things like that. I don't think I'm quite at a place with this where Eleventy serves a practical purpose for me, but I might be getting close. Little bit more playing yet.
Calling it a day here though. Should probably get some cleaning done around the house.