Diseños de página

Deja que los editores elijan una plantilla de página, por ejemplo Default, Full Width o Landing Page. Un campo select guarda la elección, y la ruta de la página asigna ese valor a un componente de diseño de Astro. Usa un campo blocks cuando los editores necesiten componer y reordenar varias secciones dentro de una página.

Cómo funciona

1. Añade un campo select template a tu colección de páginas
2. Crea componentes de diseño para cada opción
3. Asigna el valor del campo a un diseño en la ruta de la página

Esto usa el campo select de EmDash y el modelo de componentes de Astro.

Añadir el campo

En la UI de administración, añade un campo select a tu colección de páginas con el slug template y tus opciones de diseño (por ejemplo, «Default» y «Full Width»). Para definir el mismo campo en datos seed, añade el siguiente objeto a la matriz fields de la colección:

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

Crear componentes de diseño

Cada diseño envuelve el contenido en tu diseño base con un estilo distinto:

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

Conectar la ruta

En la ruta de la página, importa cada diseño y asigna el valor de la plantilla:

---
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 ruta se mantiene pequeña. Cada componente de diseño posee su propio marcado y estilo. Añadir un diseño es: crear un componente, añadir la opción al campo select, añadir una línea al mapa.

Añadir más diseños

Opciones de diseño habituales:

• Default — columna de contenido estrecha, buena para la lectura
• Full Width — área de contenido más ancha, sin barra lateral
• Landing Page — sin encabezado/pie, secciones hero
• Sidebar — contenido con un área de widgets al lado

Cada uno es solo otro componente Astro en tu directorio src/layouts/ y otra entrada en el mapa de diseños de la ruta.