Seriously Svelte
☝️ Who generated that heading?
That heading came from a wrapper layout. If you check out this page's source (svelte-page), you'll notice some frontmatter applied between those
---
blocks:
- title:
- The title we'll apply as the page heading and the browser tab title. You'll see this applied using
{`Seriously Svelte`}in the layout file described below 👇 - layout:
- The name of the layout file to apply. In this case,
layout: layouttranslates to_includes/layout.njksince 11ty looks in the _includes folder by default.
You'll notice this page is wrapped in a layout. This pulls in a few parameters using 11ty's data cascade:
-
titleuses the "title" attribute from our page's front matter. -
content | saferenders our page.
To create the page you see here, we placed a
svelte-page.svelte file alongside the other pages on our site.
That's because component pages are like any other template on your 11ty site,
just with 1 extra superpower:
you can hydrate the page with JavaScript.
Hydrating this page
We opted-in to shipping JavaScript using the hydrate key in our
frontMatter. Learn more on
our partial hydration docs.
Tip: try setting hydrate to "none", or removing the
key entirely. The counter below should stop working! This is because we're no
longer sending our component to the client, effectively turning Svelte into
just another templating language.
Count: 0
Front matter
Our included frontMatter wires up the layout and passes
information "upstream" for other templates to read from. It works the same way
for component-based pages as it does for
11ty's front matter.
Here, the title key is accessible from any layout templates applied
to our page.