Layouts in Astro

Net zoals in Sveltekit, kun je met Astro ook een layout maken die op elke pagina herbruikt kan worden.

In de BaseLayout.astro staat in ieder geval de <html> met daarin de <head> en <body>. In de body maak je gebruikt van </slot>. Hier komt de content die je in de pagina's gaat schrijven.

Voorbeeld van mijn BaseLayout:

---
import '../styles/global.css';
import Menu from '../components/organisms/Menu.astro'
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/BiebInBloei-icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="generator" content={Astro.generator} /> <!-- dit zorgt ervoor dat de content met Astro 
gerenderd kan worden -->
    <title>Bieb in Bloei</title>
  </head>
  <body>
    <Menu />
    <slot /> <!-- Content of each page will go here -->
  </body>
</html>

Om de layout te gebruiken moet je deze op elke pagina apart importeren. Dit doe je op dezelfde manier als wanneer je componenten importeert.

Voorbeeld van mijn stekjes.astro:

---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout>

    <HeroHeaders />
    <IntroHeaders />
    <OverViewPages />

</BaseLayout>

Bronnen

Commits

components, data & layouts

Annevd / choices-choices-the-tech-stack

Layouts gebruiken met Astro #7

Layouts in Astro

Bronnen

Commits