Layout di pagina

WordPress ha i «Page Templates»: un menu a tendina nell’editor per scegliere un layout per pagina (es. Default, Full Width, Landing Page). EmDash supporta lo stesso schema con un campo select.

Come funziona

1. Aggiungi un campo select template alla collection pages
2. Crea componenti di layout per ogni opzione
3. Associa il valore del campo a un layout nella route della pagina

Non serve un sistema dedicato: si usano il campo select di EmDash e il modello a componenti di Astro.

Aggiungere il campo

Nell’interfaccia di amministrazione, aggiungi un campo select alla collection pages con slug template e le opzioni di layout (es. «Default», «Full Width»). Oppure includilo nei dati di seed:

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

Creare i componenti di layout

Ogni layout avvolge il contenuto nel layout di base con stili diversi:

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

interface Props {
  page: ContentEntry<any>;
}

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 } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "./Base.astro";

interface Props {
  page: ContentEntry<any>;
}

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 ogni layout e mappa il valore del template:

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

const { slug } = Astro.params;

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

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

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

const layouts = {
  "Default": PageDefault,
  "Full Width": PageFullWidth,
};

const Layout = layouts[page.data.template as keyof typeof layouts] ?? PageDefault;
---

<Layout page={page} />

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

Aggiungere altri layout

Scelte comuni nei temi WordPress:

• Default — colonna contenuto stretta, ideale per la lettura
• Full Width — area contenuto più larga, senza sidebar
• Landing Page — senza header/footer, sezioni hero
• Sidebar — contenuto con area widget nella barra laterale

Ognuno è solo un altro componente Astro in src/layouts/ e un’altra voce nella mappa layout della route.