Diseños de página

WordPress tiene «Page Templates»: un desplegable en el editor para elegir un diseño por página (p. ej., Default, Full Width, Landing Page). EmDash admite el mismo patrón con un campo select.

Cómo funciona

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

No hace falta un sistema especial: usa el campo select existente de EmDash y el modelo de componentes de Astro.

Añadir el campo

En la interfaz de administración, añade un campo select a la colección pages con el slug template y tus opciones de diseño (p. ej., «Default», «Full Width»). O inclúyelo en tus datos de seed:

{
  "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 estilos distintos:

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

Conectar la ruta

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

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

Añadir más diseños

Opciones habituales en temas de WordPress:

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

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