Pages i Astro

Forstå /pages-mappen og kom i gang med layout-components.

Se undervisningsslides

Relevante links

TL;DR

Alt i src/pages bliver til routes i dit site.
Sider kan links med normale <a href="...">-links.
Flyt fælles HTML-struktur i et layout-component.
Brug props + <slot /> for at gøre layoutet genbrugeligt.

Hvad er pages?

I Astro bliver filer i src/pages til sider/ruter.

Det betyder fx:

src/pages/index.astro -> /
src/pages/search.astro -> /search

Du kan linke mellem dem med almindelige links:

<nav>
  <a href="/">Home</a> <!-- index.astro -->
  <a href="/search">Search</a> <!-- search.astro -->
</nav>

Layout-components

Når flere sider deler samme “skal” (head, body, meta osv.), giver det mening at samle den i et layout.

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

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

Her vises den på en side:

---
import MainLayout from "../layouts/MainLayout.astro";
---

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

Layout-struktur

I et layout er det normalt at importere faste dele (header, footer, sidebar) og bruge <slot /> til at vise det unikke indhold for hver side. Det er et godt næste step, når flere sider begynder at ligne hinanden.

...
<body>
  <Header />
  <Sidebar />
  <main>
    <slot />
  </main>
  <Footer />
</body>
...

Demo

Klik dig igennem trin for trin i følgende demo for at se, hvordan det fungerer i praksis.