`; para eso está `getSeoMeta()`. ### Edición con un clic Cada entrada lleva un proxy `edit`. Esparce `entry.edit.<campo>` sobre el elemento que renderiza ese campo y un admin logueado obtiene edición con un clic en la página pública: ```astro <h1 {...post.edit.title}>{post.data.title}</h1> <div {...page.edit.content}><MarketingBlocks value={page.data.content} /></div> ``` Barato de añadir, invisible para los visitantes, y hace que el tema se sienta integrado en lugar de atornillado encima. ## Paso 8: siembra contenido para que el tema se demuestre solo Un tema que se instala vacío es un tema que nadie evalúa. La clave `content` siembra entradas por colección; la página home siembra sus bloques como valores literales: ```json "content": { "pages": [ { "id": "home", "slug": "home", "status": "published", "data": { "title": "Home", "content": [ { "_type": "marketing_hero", "_version": 1, "_key": "home-hero", "headline": "EmDash tutorials, themes and plugins in one place", "specs": [{ "icon": "zap", "label": "Cloudflare Workers SSR" }] }, { "_type": "site_tutorials", "_version": 1, "_key": "home-tutorials", "headline": "Latest tutorials", "limit": 3 } ] } } ] } ``` Reglas de contenido seed que ahorran tiempo de depuración: - Dale a cada bloque y span un `_key` estable; es obligatorio, y las claves duplicadas producen comportamiento de edición roto. - Los campos de imagen toman `{ "$media": { "url": "...", "alt": "...", "filename": "..." } }`. EmDash descarga y guarda el archivo. Un string de URL pelado se salta la descarga pero renderiza. - Referencia otras entradas sembradas con `"$ref:seed-id"`, nunca IDs en crudo. - `"status": "draft"` siembra contenido no publicado para probar vistas de borrador. - `npx emdash export-seed --with-content` vuelca un sitio funcionando de vuelta a un archivo seed. La forma más rápida de escribir el `content` es construir las páginas en el admin y luego exportar. El seed se aplica una vez, en la primera petición a una base de datos vacía antes de que termine el setup; nunca sobrescribe datos existentes. Los cambios de esquema sobre una base de datos viva pasan por la [evolución de esquema](https://docs.emdashcms.com/deployment/schema-evolution/), no por re-sembrar. ## Paso 9: las convenciones que mantienen un tema coherente Cosas pequeñas, pero son donde los temas DIY derivan: - **Iconos.** Mantén un vocabulario de iconos fijo. En emdashhq las opciones de un campo `select` mapean a través de `src/lib/icons.ts` (`ICON_MAP`) a nombres de Phosphor, y cada icono también está listado en la config `include` de `astro-iconset`. Son tres sitios por icono nuevo: opciones del seed, el mapa, la lista de build. Olvida la lista de build y el icono no se publica, en silencio. - **URLs almacenadas.** Todo lo que un editor puede teclear en un campo `url`/`string` pasa por `sanitizeHref()` antes del `href`. Un helper `linkAttrs()` lo envuelve y añade `target="_blank" rel="noopener noreferrer"` a los enlaces web absolutos. - **Imágenes.** Siempre `<Image image={post.data.featured_image} />` de `emdash/ui`. `<img src={field}>` sobre un objeto renderiza `[object Object]`, el bug de plantilla EmDash más común con diferencia. - **Búsqueda.** `LiveSearch` de `emdash/ui/search` se inserta en el header; solo indexa colecciones con el support `search` y campos marcados `searchable`, y se estila con variables CSS `--emdash-search-*` para que combine con el tema. - **Modo oscuro.** El patrón cookie-toggle: un pequeño script `is:inline` en `<head>` añade `.light`/`.dark` (o nada = seguir al SO) antes del paint, y los tokens `light-dark()` hacen el resto. En emdashhq, `html:not(.light):not(.dark) { color-scheme: light dark }` sobrescribe el pin `color-scheme: light` del stylesheet del admin en modo sistema. Copia ese fix o el modo oscuro se quedará claro. <Notice type="warning" title="Los cinco errores que comete todo tema nuevo de EmDash"> Campos de imagen renderizados como strings (`<img src={field}>`; usa `<Image>`). Consultar una taxonomía por el nombre en plural (`"categories"` cuando el seed dice `"category"` da resultados vacíos sin error). Pasar `entry.id` (el slug) donde se requiere `data.id` (el ULID), como en `getEntryTerms` y `Comments`. `getStaticPaths` en rutas de CMS: el contenido es dinámico, así que quédate en `output: "server"`. Y olvidar `Astro.cache.set(cacheHint)` en rutas cacheadas, que hace que los eventos de publicación no invaliden la página. </Notice> ## Verifica que el tema funciona <ListCheck> <ul> <li><code>npm run dev</code> regenera <code>emdash-env.d.ts</code> con tus nuevos tipos de colección y bloque</li> <li>El picker de bloques del admin muestra tus tipos de bloque bajo sus categorías, con los campos que declaraste</li> <li>Una página compuesta de bloques sembrados renderiza en <code>/</code>; una página nueva creada en el admin funciona sin cambio de código</li> <li>Los menús, el título del sitio y los enlaces sociales editados en el admin aparecen en el sitio público</li> <li>La edición con un clic funciona para un admin logueado en campos renderizados</li> <li>Ambos modos de color renderizan; no hay colores hard-coded solo-claros en los componentes</li> <li><code>/definitely-missing</code> golpea tu ruta 404, no una página en blanco</li> </ul> </ListCheck> ## Distribuir el tema Un tema terminado es solo un repo. Para hacerlo scaffoldable como los oficiales, mantén `package.json#emdash.seed` configurado, conserva las rutas de plantilla (`src/pages`, `src/layouts`, `src/components`, `seed/`), y otra persona puede correr `npm create astro@latest -- --template tu-org/tu-repo`. Los paquetes oficiales `@emdash-cms/template-*` en npm funcionan igual. Lo que se entrega es el código más el seed; el contenido siempre empieza vacío en la base de datos del nuevo dueño. ## FAQ: temas de EmDash <Accordion label="¿Campo blocks o portableText: cuál uso?" group="faq" expanded="true"> Usa `blocks` para composición a nivel de página: una pila ordenada de secciones tipadas (hero, features, CTA) que los editores añaden y reordenan. Usa `portableText` para contenido de documento: el cuerpo de un post, una página about, cualquier cosa de flujo de párrafos. Los objetos personalizados dentro del rich text se renderizan a través del mapa `components.type` del componente `PortableText` y necesitan un plugin para una UI de editor personalizada; los bloques a nivel de página obtienen su UI de edición solo de la declaración del seed. </Accordion> <Accordion label="¿Puedo cambiar los campos de un bloque después de que el contenido lo use?" group="faq"> Sí, con cuidado. Añadir campos opcionales es compatible; enmienda la versión activa. Renombrar, quitar o retipar un campo es rompiente: añade una entrada nueva a `versions`, conserva la versión antigua para que los bloques almacenados sigan renderizando, y actualiza tu componente para manejar ambas formas antes de activarla. La unión generada `PageContentBlock` mantiene tipada cada versión retenida. </Accordion> <Accordion label="¿El tema toca alguna vez mi contenido?" group="faq"> No. El tema es código del repo más `seed/seed.json`. El seed se aplica una vez sobre una base de datos vacía; el contenido vive en D1/SQLite y los medios en R2/disco a partir de ahí. Redesplegar o editar archivos del tema nunca sobrescribe entradas, y los cambios de los editores nunca tocan tu repo. </Accordion> ## Siguiente: publícalo Ahora tienes la superficie del tema de extremo a extremo: tokens y fuentes para la apariencia, seed.json para el modelo, tipos de bloque para la experiencia del editor, rutas y un layout para el cableado, y contenido sembrado para la impresión del primer arranque. Para ver cada patrón de este artículo corriendo en producción, navega [emdashhq.com](https://emdashhq.com/), donde los tokens blueprint, los tipos de bloque personalizados en el editor de páginas y la única ruta catch-all están todos en vivo. Lo único que queda es la infraestructura: la Parte 4 despliega este stack exacto a Cloudflare Workers, D1 y R2.

--- title: "Cómo crear un tema personalizado de EmDash: tokens, bloques y esquema seed" description: "Parte 3 de la serie EmDash: cada capa de un tema personalizado (design tokens, colecciones de seed.json, tipos de bloque, rutas de página, menús, widgets y contenido semilla) con un ejemplo real en producción." date: 2026-09-30 categories: ["web-development"] tags: ["emdash","astro","themes"] --- import Button from "@components/widgets/Button.astro"; import Notice from "@components/widgets/Notice.astro"; import ListCheck from "@components/widgets/ListCheck.astro"; import Accordion from "@components/widgets/Accordion.astro"; Esta es la Parte 3 de la serie EmDash. La [Parte 1 reseñó el CMS en su 1.0](/emdash-cms-review/) y la [Parte 2 dejó un sitio corriendo en local](/emdash-cms-tutorial/) sobre Node.js y SQLite. Esta parte trata de la capa que de verdad es tuya: el tema. Cubre cómo se arma un tema de EmDash y cómo construir el tuyo propio: design tokens, el esquema seed, tipos de bloque, rutas, menús y contenido semilla. El ejemplo que recorre el artículo es real: [emdashhq.com](https://emdashhq.com/), el sitio hub de EmDash, arrancó desde la plantilla marketing de serie y se reestilizó a un aspecto de hoja de plano blueprint con seis tipos de bloque personalizados. El despliegue queda deliberadamente fuera de alcance; la siguiente parte cubre Cloudflare Workers, D1 y R2. ![El tema personalizado terminado: portada de emdashhq.com con fondo de rejilla blueprint, hero estilo ficha de especificaciones, tarjeta con diagrama de arquitectura e índice de tutoriales](@assets/images/26/09/emdash-home.webp)

{value.headline}