Like it says above, I'm trying to get a unique title in the top of the browser window via the title tag, but I'm using a layout/template for the <head> and top body of my page.
Sorry, I'm new to coding in general, any tips?
#<head> is in Layout, but want a unique <title> for each page that uses the Layout
flat plinth
rare nacelleBOT
Hi @flat plinth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Sure, I can help with that. In Astro, you can pass page-specific values as props to your layout component. Here's how you can do it:
- Pass the page title to your layout component from your page (for example,
index.astro) using a component attribute. Here's an example:
---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
<h2>My awesome blog subtitle</h2>
</BaseLayout>
- Then, in your
BaseLayout.astrolayout component, receive the page title viaAstro.propsinstead of defining it as a constant. Here's how you can do it:
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const { pageTitle } = Astro.props;
---
- Now, each individual page can specify its own title to the layout. Check your browser preview to verify that your page title has not changed. It has the same value, but is now being rendered dynamically.
You can find more details in the Astro documentation (https://docs.astro.build/en/tutorial/4-layouts/1#pass-page-specific-values-as-props).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
flat plinth
Does what you say above work with <title> in the head too though? Above seems to be for an h2 title within the body.
@rare nacelle Does what you say above work with <title> in the head too though? Above seems to be for an h2 title within the body.
rare nacelleBOT
Let me check the knowledge base for you. One moment! :books:
Yes, the same concept applies to the <title> tag in the <head> section of your HTML. You can pass the title as a prop to your layout component and then use it in the <title> tag. Here's how you can do it:
- Pass the page title to your layout component from your page (for example,
index.astro) using a component attribute. Here's an example:
---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
<!-- Your page content goes here -->
</BaseLayout>
- Then, in your
BaseLayout.astrolayout component, receive the page title viaAstro.propsand use it in the<title>tag. Here's how you can do it:
---
const { pageTitle } = Astro.props;
---
<html>
<head>
<title>{pageTitle}</title>
</head>
<body>
<slot />
</body>
</html>
Now, each individual page can specify its own title to the layout. The title will be used in the <title> tag in the <head> section of your HTML, which is what is displayed in the browser tab.