Diseños de Página

Permite que los editores elijan un diseño por página (por ejemplo, Predeterminado, Ancho Completo, Página de Destino) desde un menú desplegable en el editor, usando un campo select mapeado a componentes de diseño en tu ruta de página.

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

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

Agregar el campo

En la interfaz de administración, agrega un campo select a tu colección de páginas con el slug template y tus opciones de diseño (por ejemplo, “Default”, “Full Width”). O inclúyelo en tus datos de semilla:

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

---
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 tu ruta de 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 estilo. Agregar un diseño es: crear un componente, agregar la opción al campo select, agregar una línea al mapa.

Agregar más diseños

Opciones de diseño comunes:

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

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