#using Layout in every pages
4 messages · Page 1 of 1 (latest)
To use a layout in every page in Astro, you need to create a layout component and import it into your pages. Here's a step-by-step guide based on the information provided in the extracts:
- Create a layout component. This is a
.astrofile that includes the common HTML structure of your pages. You can place it in alayoutsdirectory in your project. Here's an example of a layout component:
---import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
const { title } = Astro.props;---
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<BaseHead title={title}/>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">Posts</a>
<a href="#">Contact</a>
</nav>
<h1>{title}</h1>
<article>
<slot /> <!-- your content is injected here -->
</article>
<Footer />
</body>
</html>
(Source: Astro Documentation (https://docs.astro.build/en/basics/layouts#sample-layout))
- Import the layout component into your pages and wrap your page content with it. Here's an example:
---import MySiteLayout from '../layouts/MySiteLayout.astro';---
<MySiteLayout title="Home Page">
<p>My page content, wrapped in a layout!</p>
</MySiteLayout>
(Source: Astro Documentation (https://docs.astro.build/en/basics/layouts#sample-layout))
Regarding the error you're encountering, it seems like a module is not found. This could be due to various reasons such as the module not being installed, the path being incorrect, or the module not being properly exported. Unfortunately, the provided extracts do not contain specific information to resolve this error. I would recommend checking your project's dependencies and the paths you're using in your imports. If the issue persists, consider seeking help from the Astro community or the module's maintainers.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
@tawny ferry kapa.ai is still learning and improving, please let us know how it did by reacting below