Saltar al contenido principal

Layouts

  • Son como cualquier otro componente reutilizable
  • Generalmente envuelve las plantillas de HTML, con <html>, <head> y <body>
  • <slot/> es donde se agregan los demás componentes o etiquetas HTML

Layout​

src\layout\MainLayout.astro
---
import Navbar from "../components/Navbar.astro";

interface Props {
  title: string;
  isActive?: boolean;
}

const { title, isActive } = Astro.props;
---

<html lang="es">

  <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>{title}</title>
  </head>

  <body>
    <Navbar />
    <main>
      <slot />
    </main>
  </body>

</html>

Uso​

src\pages\about.astro
---
import MainLayout from "../layout/MainLayout.astro";
---

<MainLayout title="About">
  <h1>About</h1>
</MainLayout>
src\pages\contact.astro
---
import MainLayout from "../layout/MainLayout.astro";
---

<MainLayout title="Contact">
  <h1>Contact</h1>
</MainLayout>