Layout di pagina

Lascia che gli editor scelgano 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 select template alla collection delle pagine
2. Crea componenti di layout per ciascuna opzione
3. Associa il valore del campo a un layout nella route della pagina

Questo usa il campo select di EmDash e il modello di componenti di Astro.

Aggiungere il campo

Nell’interfaccia di amministrazione, aggiungi un campo select alla collection delle pagine con slug template e le 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 collection:

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

Creare i componenti di layout

Ogni layout racchiude il contenuto nel 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 pagina, importa ciascun 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.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} />

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

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 header/footer, sezioni hero
• Sidebar — contenuto con un’area widget accanto

Ognuno è solo un altro componente Astro nella directory src/layouts/ e un’altra voce nella map di layout della route.