src/content/docs/en/tutorial/4-layouts/1.mdx
import Box from '/components/tutorial/Box.astro';
import Checklist from '/components/Checklist.astro';
import MultipleChoice from '/components/tutorial/MultipleChoice.astro';
import Option from '/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
You still have some Astro components repeatedly rendered on every page. It's time to refactor again to create a shared page layout!
Copy the entire contents of index.astro into your new file, BaseLayout.astro.
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
</head>
<body>
<Header />
<h1>{pageTitle}</h1>
<Footer />
<script>
import "../scripts/menu.js";
</script>
</body>
</html>
```astro title="src/pages/index.astro"
---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout>
<h2>My awesome blog subtitle</h2>
</BaseLayout>
```
4. Check the browser preview again to notice what did (or, spoiler alert: did not!) change.
Add a <slot /> element to src/layouts/BaseLayout.astro just above the footer component, then check the browser preview of your Home page and notice what really did change this time!
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
</head>
<body>
<Header />
<h1>{pageTitle}</h1>
<slot />
<Footer />
<script>
import "../scripts/menu.js";
</script>
</body>
</html>
The <slot /> allows you to inject (or "slot in") child content written between opening and closing <Component></Component> tags to any Component.astro file.
```astro title="src/pages/index.astro" 'pageTitle={pageTitle}'
---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
<h2>My awesome blog subtitle</h2>
</BaseLayout>
```
7. Change the script of your BaseLayout.astro layout component to receive a page title via Astro.props instead of defining it as a constant.
```astro title="src/layouts/BaseLayout.astro" del={5} ins={6}
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
const { pageTitle } = Astro.props;
---
```
8. 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. </Steps>
<Box icon="puzzle-piece">Refactor your other pages (blog.astro and 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.
Move any existing <style> tags in the page <head> with styles you wish to keep to the page HTML template.
Delete anything from each individual page that is now being handled by the layout, including:
<style> tag (e.g. <h1> in your About page)<script> tags:::note[Keeping your About page styles]
Using the <BaseLayout> to render your about.astro page means you will lose the <style> tag added to the <head> of this page. To continue to style items only at the page level using Astro's scoped styling, move the <style> tag to the body of the page component. This allows you to style elements created in this page component (e.g. your list of skills).
Since your <h1> is now created by your layout component, you can add the is:global attribute to your style tag to affect every element on this page, including those created by other components: <style is:global define:vars={{ skillColor, fontWeight, textCase }}>
:::
</Box>
An Astro component (.astro file) can function as a:
To display a page title on the page, you can:
<MultipleChoice> <Option> use a standard HTML element on the page with static text (e.g `<h1>Home Page</h1>`) </Option> <Option> use a standard HTML element on the page referring to a variable defined in your component's frontmatter script (e.g. `<h1>{pageTitle}</h1>`) </Option> <Option> use a layout component on the page, passing the title as a component attribute (e.g. `<BaseLayout title="Home Page" />` or `<BaseLayout title={pageTitle} />`) </Option> <Option isCorrect> all of the above, because Astro lets you use plain HTML or supercharge it with some script and components! 💪 </Option> </MultipleChoice>Information can be passed from one component to another by:
<MultipleChoice> <Option> importing a UI component and rendering it in the template of another component </Option> <Option> passing props to a component where it is rendered via a component attribute </Option> <Option> sending HTML content to be rendered inside another component using a `<slot />` placeholder </Option> <Option isCorrect> all of the above, because Astro was built to take advantage of component-based design! 🧩 </Option> </MultipleChoice>