Layout di Pagina

Consenti agli editori di scegliere un layout per pagina (ad es. Predefinito, Larghezza Piena, Landing Page) da un menu a tendina nell’editor, utilizzando un campo select mappato ai componenti di layout nella tua route di pagina.

Come funziona

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

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

Aggiungere il campo

Nell’interfaccia di amministrazione, aggiungi un campo select alla tua collezione di pagine con lo slug template e le tue opzioni di layout (ad es. “Default”, “Full Width”). Oppure includilo nei tuoi dati di seed:

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

Creare componenti di layout

Ogni layout avvolge il contenuto nel tuo layout 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 tua route di 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 rimane 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 mappa.

Aggiungere più layout

Opzioni di layout comuni:

• Default — colonna di contenuto stretta, ottima per la lettura
• Full Width — area di contenuto più ampia, senza sidebar
• Landing Page — senza header/footer, sezioni hero
• Sidebar — contenuto con un’area widget della sidebar

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