Passing data to layouts

[slender sleet]

How can I pass page specific data, like page title, to a layout?

[gilded summit]

Hi @slender sleet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You can pass page-specific data to a layout in Astro by using component attributes. Here's a step-by-step guide on how to do it:

1. Pass the page title to your layout component from index.astro using a component attribute. For example:

---import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}> 
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

In this example, pageTitle is a variable defined in the frontmatter script of index.astro and its value is passed to the BaseLayout component as a prop.

2. Change the script of your BaseLayout.astro layout component to receive a page title via Astro.props instead of defining it as a constant. For example:

---import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const { pageTitle } = Astro.props;
---

In this example, pageTitle is a prop received from the parent component (index.astro).

3. 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.

For more details, you can refer to the Astro documentation (https://docs.astro.build/en/tutorial/4-layouts/1/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: