4 • Save time and energy with reusable page layouts
Build your first layout
Get ready to…
- Refactor common elements into a page layout
- Use an Astro
<slot />element to place page contents within a layout
- Pass page-specific values as props to its layout
You still have some Astro components repeatedly rendered on every page. Let’s refactor again to create a shared page layout!
Create your first layout componentSection titled Create your first layout component
Create a new file at the location
src/layouts/BaseLayout.astro. (You will need to create a new
Copy the entire contents of
index.astrointo your new file,
Use your layout on a pageSection titled Use your layout on a page
Replace the code at
src/pages/index.astrowith the following:
Check the browser preview again to notice what did (or, spoiler alert: did not!) change.
<slot />element to
src/layouts/BaseLayout.astrojust above the footer component, then check the browser preview of your Home page and notice what really did change this time!
<slot /> allows you to inject (or “slot in”) child content written between opening and closing
<Component></Component> tags to any
Pass page-specific values as propsSection titled Pass page-specific values as props
Pass the page title to your layout component from
index.astrousing a component attribute:
Change the script of your
BaseLayout.astrolayout component to receive a page title via
Astro.propsinstead of defining it as a constant.
Check your browser preview to verify that your page title has not changed. It has the same value, but is now being rendered dynamically. And now, each individual page can specify its own title to the layout.
Try it yourself - Use your layout everywhereSection titled Try it yourself - Use your layout everywhere
Refactor your other pages (
about.astro) so that they use your new
<BaseLayout> component to render the common page elements.
Don’t forget to:
Pass a page title as props via a component attribute.
Let the layout be responsible for the HTML rendering of any common elements.
Delete anything from each page that that page is no longer responsible for rendering, because it is being handled by the layout, including:
- HTML elements
- Components and their imports
- CSS rules in a
<h1>in your About page)
Test your knowledgeSection titled Test your knowledge
An Astro component (
.astrofile) can function as a:
To display a page title on the page, you can:
Information can be passed from one component to another by: