Un tema de EmDash es un sitio Astro completo (páginas, diseños, componentes, estilos) distribuido vía create-astro. También incluye un archivo seed que inicializa la base de datos con colecciones, campos, menús, redirecciones y contenido de ejemplo en la primera ejecución.
Qué aporta un tema
Un tema es un proyecto Astro funcional con:
- Pages — Rutas Astro para renderizar contenido (inicio, entradas de blog, archivos, etc.)
- Layouts — Estructura HTML compartida
- Components — Elementos de UI reutilizables (navegación, tarjetas, pies)
- Styles — CSS o configuración de Tailwind
- Un archivo seed — JSON que indica al CMS qué tipos de contenido y campos crear
Estructura del tema
my-theme/
├── package.json # Metadatos del tema + config EmDash
├── astro.config.mjs # Integración Astro
├── src/
│ ├── live.config.ts # Configuración de Live Collections
│ ├── pages/ # Rutas Astro
│ ├── layouts/ # Componentes de diseño
│ └── components/ # Componentes de UI
└── .emdash/
├── seed.json # Esquema + contenido de ejemplo
└── uploads/ # Archivos multimedia locales opcionalesCómo arrancan los sitios
Al crear un sitio desde un tema ocurre lo siguiente:
create-astrogenera el proyecto desde la plantilla- Ejecutas
npm installynpm run dev - En la primera visita al admin se ejecuta automáticamente el asistente de configuración
- El asistente aplica el seed, creando colecciones, menús, redirecciones y contenido
- El sitio queda listo
Para usuarios
Elige un tema, ejecuta el asistente y edita. No hace falta conocer la base de datos.
Para desarrolladores
Los temas son proyectos Astro estándar. Personalízalos libremente tras el scaffolding.
Instalar un tema
Usa create-astro con una plantilla:
npm create astro@latest -- --template @emdash-cms/template-blogLos temas de la comunidad funcionan vía GitHub:
npm create astro@latest -- --template github:user/emdash-portfolioTras la instalación:
cd my-site
npm install
npm run devVisita http://localhost:4321/_emdash/admin para completar el asistente.
El asistente de configuración
Se ejecuta automáticamente en la primera visita al admin. El asistente:
- Pide título del sitio, eslogan y credenciales de administrador
- Ofrece incluir contenido de ejemplo
- Aplica el archivo seed a la base de datos
- Redirige al panel de administración
┌────────────────────────────────────────────────────────┐
│ │
│ ◆ EmDash │
│ │
│ Bienvenido a tu nuevo sitio │
│ │
│ Título: [Mi blog genial ] │
│ Eslogan: [Ideas y reflexiones ] │
│ │
│ Email admin: [[email protected] ] │
│ Contraseña: [•••••••••••• ] │
│ │
│ ☑ Incluir contenido de ejemplo │
│ │
│ [Crear sitio →] │
│ │
│ Plantilla: Blog inicial │
│ Crea: 2 colecciones, 3 páginas, 1 entrada │
└────────────────────────────────────────────────────────┘Temas oficiales
EmDash ofrece temas oficiales de inicio, cada uno en variantes local (SQLite + sistema de archivos) y Cloudflare (D1 + R2):
| Tema | Descripción | Uso |
|---|---|---|
@emdash-cms/template-blog | Blog mínimo con entradas, páginas, categorías y modo oscuro | Blogs personales, sitios simples |
@emdash-cms/template-portfolio | Portfolio editorial con proyectos, tipografía serif (Playfair Display) y diseños centrados en imagen | Freelancers, agencias, creativos |
@emdash-cms/template-marketing | Sitio de marketing con bloques Portable Text (hero, características, testimonios, precios, FAQ) | Landing pages, SaaS, marketing de producto |
Variantes Cloudflare
Para Cloudflare Pages con D1 y R2, añade -cloudflare al nombre de la plantilla:
npm create astro@latest -- --template @emdash-cms/template-blog-cloudflare
npm create astro@latest -- --template @emdash-cms/template-portfolio-cloudflare
npm create astro@latest -- --template @emdash-cms/template-marketing-cloudflareEstas variantes incluyen wrangler.jsonc para la configuración de despliegue.
Personalizar tras la instalación
Cuando termina el asistente, tu sitio es un proyecto Astro estándar. Personalízalo como cualquier sitio Astro:
- Edita páginas en
src/pages/ - Modifica diseños en
src/layouts/ - Añade colecciones desde el admin
- Instala integraciones de Astro
- Despliega donde Astro funcione
El archivo seed solo se usa en la configuración inicial. Una vez aplicado, el esquema vive en la base de datos.
Próximos pasos
- Crear temas — Construye tu propio tema EmDash
- Formato del seed — Referencia de la estructura del seed
- Primeros pasos — Crea tu primer sitio EmDash