E EmDash CMS Everything Guides, use cases, plugins, templates
Español

Descripción General de Temas

En esta página

Un tema de EmDash es un sitio Astro completo — páginas, layouts, componentes, estilos — distribuido a través de 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.

Lo que proporciona un tema

Un tema es un proyecto Astro funcional con:

  • Pages — Rutas de Astro para renderizar contenido (página de inicio, publicaciones de blog, archivos, etc.)
  • Layouts — Estructura HTML compartida
  • Components — Elementos UI reutilizables (navegación, tarjetas, pies de página)
  • Styles — Configuración de CSS o Tailwind
  • Un archivo seed — JSON que indica al CMS qué tipos de contenido y campos crear

Estructura del tema

Un tema tiene el siguiente diseño:

my-theme/
├── package.json           # Metadatos del tema + configuración de EmDash
├── astro.config.mjs       # Configuración de integración de Astro
├── src/
│   ├── live.config.ts     # Configuración de Live Collections
│   ├── pages/             # Rutas de Astro
│   ├── layouts/           # Componentes de layout
│   └── components/        # Componentes UI
└── .emdash/
    ├── seed.json          # Esquema + contenido de ejemplo
    └── uploads/           # Archivos multimedia locales opcionales

Cómo los temas inician sitios

Crear un sitio desde un tema sigue estos pasos:

  1. create-astro crea el proyecto desde la plantilla
  2. Ejecutar npm install y npm run dev
  3. En la primera visita al admin, el Asistente de Configuración se ejecuta automáticamente
  4. El asistente aplica el archivo seed, creando colecciones, menús, redirecciones y contenido
  5. El sitio está listo para usar

Para Usuarios

Elige un tema, ejecuta el asistente, comienza a editar. No se requieren conocimientos de bases de datos.

Para Desarrolladores

Los temas son proyectos Astro estándar. Personalízalos libremente después del scaffolding.

Instalar un tema

El siguiente comando crea un sitio desde una plantilla de tema oficial:

npm create astro@latest -- --template @emdash-cms/template-blog

Los temas de la comunidad alojados en GitHub usan el prefijo de plantilla github::

npm create astro@latest -- --template github:user/emdash-portfolio

Después del scaffolding, instala las dependencias e inicia el servidor de desarrollo:

cd my-site
npm install
npm run dev

Visita http://localhost:4321/_emdash/admin para completar el Asistente de Configuración.

El Asistente de Configuración

El Asistente de Configuración se ejecuta automáticamente en la primera visita al admin. Realiza estos pasos:

  1. Solicita el título del sitio, eslogan y credenciales de administrador
  2. Ofrece una opción para incluir contenido de ejemplo
  3. Aplica el archivo seed a la base de datos
  4. Redirige al panel de administración

Temas oficiales

EmDash proporciona temas iniciales oficiales, cada uno disponible en variantes locales (SQLite + sistema de archivos) y Cloudflare (D1 + R2):

TemaDescripciónCaso de uso
@emdash-cms/template-blogBlog minimalista con publicaciones, páginas, categorías y modo oscuroBlogs personales, sitios simples
@emdash-cms/template-portfolioPortafolio de estilo editorial con proyectos, tipografía serif (Playfair Display) y layouts centrados en imágenesFreelancers, agencias, creativos
@emdash-cms/template-marketingSitio de marketing audaz con bloques personalizados de Portable Text (hero, características, testimonios, precios, FAQ)Landing pages, sitios SaaS, marketing de productos

Variantes de Cloudflare

Para el despliegue en Cloudflare Workers con D1 y R2, agrega -cloudflare al nombre de la plantilla, como en los siguientes comandos:

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

Estas variantes incluyen wrangler.jsonc para la configuración de despliegue.

Personalización después de la instalación

Después de que se complete el Asistente de Configuración, el sitio es un proyecto Astro estándar. Personalízalo como cualquier sitio Astro:

  • Edita páginas en src/pages/
  • Modifica layouts en src/layouts/
  • Agrega colecciones a través de la UI de administración
  • Instala integraciones de Astro
  • Despliega en cualquier lugar donde se ejecute Astro

El archivo seed solo se usa durante la configuración inicial. Después de eso, administra el modelo de contenido en el panel de administración o con la CLI.

Próximos pasos