Diseños de página

WordPress tiene las “plantillas de página”: un menú desplegable en el editor para elegir un diseño concreto en cada página, por ejemplo “Predeterminado”, “Ancho completo” o “Landing page”. En EmDash puedes resolverlo con el mismo patrón usando un campo select.

Cómo funciona

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

No hace falta ningún sistema especial. Todo esto se apoya en el campo select que ya incluye EmDash y en el modelo de componentes de Astro.

Agregar el campo

En la interfaz de administración, añade un campo select a tu colección de páginas con el slug template y las opciones de diseño que quieras ofrecer, por ejemplo “Predeterminado” y “Ancho completo”. También puedes declararlo en los datos seed:

.emdash/seed.json

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

src/layouts/PageDefault.astro

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

src/layouts/PageFullWidth.astro

---
import type { ContentEntry } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "../../guides/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 relaciona el valor del campo con el componente correspondiente:

src/pages/pages/[slug].astro

---
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 sigue siendo pequeña. Cada layout controla su propio marcado y sus estilos, así que añadir uno nuevo solo requiere tres pasos: crear el componente, sumarlo al campo select y añadir una línea al mapa.

Consejo

Usa nombres legibles como “Ancho completo” en lugar de slugs como full-width. Ese mismo valor será el que se guarde y el que verán los editores en el desplegable del administrador.

Agregar más diseños

Opciones habituales en temas de WordPress:

• Predeterminado — columna de contenido estrecha, buena para lectura
• Ancho Completo — área de contenido más amplia, sin barra lateral
• Página de Destino — sin encabezado/pie de página, secciones de héroe
• Barra Lateral — contenido con un área de widgets en la barra lateral

Cada opción es, en la práctica, otro componente de Astro dentro de src/layouts/ y otra entrada en el mapa de layouts de la ruta.