Layouts

  • Practice with CodePen Pens

  • create src\layouts directory

BaseLayout.astro
---

---

<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> Website </title>
	</head>
	<body>

        <!-- Nav -->
         <nav>
            <a href="/">Home</a>
            <a href="/about/">About</a>    
         </nav>

        <!-- Main Content -->
        <main>
            <slot />
        </main>

        <!-- Footer -->
        <footer>
            <p>Website Copyright YEAR</p>
        </footer>


	</body>
	</html>
index.astro
---
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout>

	<h1>Homepage</h1>

</BaseLayout>
---
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout>

	<h1>About Page</h1>

</BaseLayout>

Previous.astro filesNextStyling

Last updated