Seitenlayouts

Lassen Sie Redakteure eine Seitenvorlage wählen, zum Beispiel Default, Full Width oder Landing Page. Ein select-Feld speichert die Wahl, und die Seitenroute mappt diesen Wert auf eine Astro-Layout-Komponente. Verwenden Sie ein blocks-Feld, wenn Redakteure mehrere Abschnitte innerhalb einer Seite zusammenstellen und neu anordnen müssen.

So funktioniert es

1. Fügen Sie Ihrer Pages-Collection ein template-Select-Feld hinzu
2. Erstellen Sie Layout-Komponenten für jede Option
3. Mappen Sie den Feldwert in Ihrer Seitenroute auf ein Layout

Das nutzt EmDashs Select-Feld und Astros Komponentenmodell.

Das Feld hinzufügen

Fügen Sie in der Admin-UI Ihrer Pages-Collection ein Select-Feld mit dem Slug template und Ihren Layout-Optionen hinzu (zum Beispiel „Default“ und „Full Width“). Um dasselbe Feld in Seed-Daten zu definieren, fügen Sie folgendes Objekt zum fields-Array der Collection hinzu:

{
  "slug": "template",
  "label": "Template",
  "type": "select",
  "validation": {
    "options": ["Default", "Full Width"]
  },
  "defaultValue": "Default"
}

Layout-Komponenten erstellen

Jedes Layout umschließt Inhalte in Ihrem Basis-Layout mit unterschiedlicher Gestaltung:

---
import type { ContentEntry, InferCollectionData } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<InferCollectionData<"pages">>;
}

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

<Base title={page.data.title}>
  <article class="page-default">
    <h1>{page.data.title}</h1>
    <PortableText value={page.data.content} />
  </article>
</Base>

<style>
  .page-default {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 2rem 1rem;
  }
</style>

---
import type { ContentEntry, InferCollectionData } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<InferCollectionData<"pages">>;
}

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

<Base title={page.data.title}>
  <article class="page-wide">
    <h1>{page.data.title}</h1>
    <PortableText value={page.data.content} />
  </article>
</Base>

<style>
  .page-wide {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: 2rem 1rem;
  }
</style>

Die Route verdrahten

Importieren Sie in Ihrer Seitenroute jedes Layout und mappen Sie den Vorlagenwert:

---
import { decodeSlug, getEmDashEntry } from "emdash";
import PageDefault from "../../layouts/PageDefault.astro";
import PageFullWidth from "../../layouts/PageFullWidth.astro";

const slug = decodeSlug(Astro.params.slug);

if (!slug) {
  return Astro.redirect("/404");
}

const { entry: page } = await getEmDashEntry("pages", slug);

if (!page) {
  return Astro.redirect("/404");
}

const layouts = new Map([
  ["Default", PageDefault],
  ["Full Width", PageFullWidth],
]);

const Layout = layouts.get(page.data.template ?? "") ?? PageDefault;
---

<Layout page={page} />

Die Route bleibt klein. Jede Layout-Komponente besitzt ihr eigenes Markup und Styling. Ein Layout hinzufügen heißt: Komponente erstellen, Option zum Select-Feld hinzufügen, eine Zeile zur Map hinzufügen.

Weitere Layouts hinzufügen

Häufige Layout-Wahlmöglichkeiten:

• Default — schmale Inhaltsspalte, gut zum Lesen
• Full Width — breiterer Inhaltsbereich, keine Sidebar
• Landing Page — kein Header/Footer, Hero-Abschnitte
• Sidebar — Inhalt mit einem Widget-Bereich daneben

Jedes ist nur eine weitere Astro-Komponente in Ihrem src/layouts/-Verzeichnis und ein weiterer Eintrag in der Layout-Map der Route.