Layout di pagina

Consenti agli editor di scegliere un template di pagina, ad esempio Default, Full Width o Landing Page. Un campo select memorizza la scelta e la route della pagina associa quel valore a un componente di layout Astro. Usa un campo blocks quando gli editor devono comporre e riordinare più sezioni all’interno di una pagina.

Come funziona

1. Aggiungi un campo di selezione template alla tua collezione di pagine
2. Crea componenti di layout per ogni opzione
3. Associa il valore del campo a un layout nella route della tua pagina

Questo sfrutta il campo di selezione di EmDash e il modello a componenti di Astro.

Aggiungere il campo

Nell’interfaccia di amministrazione, aggiungi alla tua collezione di pagine un campo di selezione con slug template e le tue opzioni di layout (ad esempio «Default» e «Full Width»). Per definire lo stesso campo nei dati seed, aggiungi il seguente oggetto all’array fields della collezione:

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

Creare i componenti di layout

Ogni layout avvolge il contenuto nel tuo layout di base con uno stile diverso:

---
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>

Collegare la route

Nella route della tua pagina, importa ogni layout e associa il valore del template:

---
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} />

La route resta piccola. Ogni componente di layout gestisce il proprio markup e il proprio stile. Aggiungere un layout significa creare un componente, aggiungere l’opzione al campo di selezione e aggiungere una riga alla mappa.

Aggiungere altri layout

Scelte di layout comuni:

• Default — colonna di contenuto stretta, adatta alla lettura
• Full Width — area di contenuto più ampia, senza barra laterale
• Landing Page — senza intestazione né piè di pagina, con sezioni hero
• Sidebar — contenuto con un’area widget accanto

Ciascuno è semplicemente un altro componente Astro nella tua directory src/layouts/ e un’altra voce nella mappa dei layout della route.