Seitenlayouts

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

So funktioniert es

1. Fügen Sie Ihrer Seitensammlung ein Auswahlfeld template hinzu
2. Erstellen Sie für jede Option Layout-Komponenten
3. Ordnen Sie in Ihrer Seitenroute den Feldwert einem Layout zu

Dies nutzt das Auswahlfeld von EmDash und das Komponentenmodell von Astro.

Das Feld hinzufügen

Fügen Sie in der Admin-Oberfläche Ihrer Seitensammlung ein Auswahlfeld mit dem Slug template und Ihren Layout-Optionen hinzu (zum Beispiel „Default“ und „Full Width“). Um dasselbe Feld in den Seed-Daten zu definieren, fügen Sie das folgende Objekt zum Array fields der Sammlung hinzu:

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

Layout-Komponenten erstellen

Jedes Layout bettet den Inhalt mit unterschiedlichem Styling in Ihr Basis-Layout ein:

---
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 ordnen Sie den Template-Wert zu:

---
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.rewrite("/404");
}

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

if (!page) {
  return Astro.rewrite("/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 verantwortet ihr eigenes Markup und Styling. Ein Layout hinzuzufügen heißt: eine Komponente erstellen, die Option zum Auswahlfeld hinzufügen und eine Zeile zur Map ergänzen.

Weitere Layouts hinzufügen

Gängige Layout-Optionen:

• Default — schmale Inhaltsspalte, gut zum Lesen
• Full Width — breiterer Inhaltsbereich, keine Seitenleiste
• Landing Page — keine Kopf-/Fußzeile, Hero-Abschnitte
• Sidebar — Inhalt mit einem Widget-Bereich daneben

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