Trabajar con contenido

En esta página

Esta guía cubre cómo crear, editar y gestionar contenido usando el panel de administración de EmDash.

Acceder al admin

Abre tu navegador en /_emdash/admin en tu sitio. Inicia sesión con las credenciales que creaste durante la configuración.

El panel muestra:

  • Barra lateral - Navegación a collections, medios y configuración
  • Lista de contenido - Entradas en la collection seleccionada
  • Acciones rápidas - Crear nuevo contenido, operaciones masivas

Crear contenido

  1. Haz clic en el nombre de una collection en la barra lateral (ej., Posts)

  2. Haz clic en New Post (o el equivalente para tu collection)

  3. Rellena los campos obligatorios:

    • Title - El nombre visible del contenido
    • Slug - Identificador URL (generado automáticamente del título, editable)
  4. Añade contenido usando el editor de texto enriquecido

  5. Configura los metadatos en la barra lateral:

    • Status - Borrador, Publicado o Archivado
    • Fecha de publicación - Cuándo publicar
    • Categorías y tags - Asignaciones de taxonomía
  6. Haz clic en Guardar

Los borradores solo son visibles en el admin. Cambia el estado a Publicado para hacer el contenido visible en tu sitio.

Estados del contenido

Cada entrada tiene uno de tres estados:

EstadoVisibilidadCaso de uso
BorradorSolo adminTrabajo en curso
PublicadoPúblicoContenido activo
ArchivadoSolo adminContenido retirado

Cambia el estado usando el desplegable en la barra lateral del editor.

El editor de texto enriquecido

El editor de EmDash soporta:

  • Encabezados - H2 a H6
  • Formato - Negrita, cursiva, subrayado, tachado
  • Listas - Ordenadas y no ordenadas
  • Enlaces - Internos y externos
  • Imágenes - Insertar desde la biblioteca de medios
  • Bloques de código - Con resaltado de sintaxis
  • Bloques HTML - HTML sin procesar para incrustaciones y widgets personalizados
  • Incrustaciones - YouTube, Vimeo, Twitter
  • Secciones - Bloques de contenido reutilizables vía comando /section

Comandos slash

Escribe / para acceder a comandos de inserción rápida:

ComandoAcción
/sectionInsertar una sección reutilizable
/imageInsertar una imagen de la biblioteca de medios
/codeInsertar un bloque de código
/htmlInsertar un bloque de HTML sin procesar

Atajos de teclado

AcciónAtajo
NegritaCtrl/Cmd + B
CursivaCtrl/Cmd + I
EnlaceCtrl/Cmd + K
DeshacerCtrl/Cmd + Z
RehacerCtrl/Cmd + Shift + Z
GuardarCtrl/Cmd + S

Insertar imágenes

  1. Haz clic en el botón de imagen en la barra de herramientas

  2. Selecciona una imagen existente de la biblioteca de medios, o sube una nueva

  3. Añade texto alternativo (obligatorio para accesibilidad)

  4. Ajusta las opciones de alineación y tamaño

  5. Haz clic en Insertar

Bloques HTML

Usa /html para insertar un bloque de HTML sin procesar. Esto es útil para incrustar widgets de terceros, marcado personalizado o contenido que no encaja en los tipos de bloque estándar. Los bloques HTML también se crean automáticamente al importar contenido de WordPress o Contentful que contiene marcado que EmDash no puede convertir en bloques nativos de Portable Text.

Para permitir iframes de proveedores adicionales, sobreescribe el componente htmlBlock en tu renderizado de Portable Text:

---
// src/components/MyHtmlBlock.astro
import sanitizeHtml from "sanitize-html";

const { node } = Astro.props;

if (!node?.html) {
  return null;
}

const sanitized = sanitizeHtml(node.html, {
  allowedTags: [...sanitizeHtml.defaults.allowedTags, "img", "span", "iframe"],
  allowedAttributes: {
    ...sanitizeHtml.defaults.allowedAttributes,
    "*": ["class", "id", "data-*", "style"],
    iframe: ["src", "width", "height", "frameborder", "allow", "allowfullscreen"],
    img: ["src", "srcset", "alt", "title", "width", "height", "loading"],
  },
  allowedIframeHostnames: [
    "www.youtube.com",
    "player.vimeo.com",
    "iframe.videodelivery.net", // Cloudflare Stream
    // Añade tus proveedores aquí
  ],
});
---

<div class="html-block" set:html={sanitized} />

Luego pásalo a <PortableText>:

---
import { PortableText } from "emdash/ui";
import MyHtmlBlock from "../components/MyHtmlBlock.astro";
---

<PortableText
  value={post.data.content}
  components={{ type: { htmlBlock: MyHtmlBlock } }}
/>

Editar contenido

  1. Navega a la collection que contiene el contenido

  2. Haz clic en la entrada que quieres editar

  3. Realiza tus cambios

  4. Haz clic en Guardar

Los cambios en contenido publicado aparecen inmediatamente en tu sitio.

Historial de revisiones

EmDash rastrea los cambios en el contenido. Accede al historial de revisiones desde la barra lateral del editor:

  1. Haz clic en Revisions en la barra lateral del editor

  2. Visualiza la lista de versiones anteriores con marcas de tiempo

  3. Haz clic en una revisión para previsualizarla

  4. Haz clic en Restaurar para volver a esa versión

Restaurar una revisión crea una nueva revisión con el contenido restaurado. El historial de revisiones original se preserva.

Operaciones masivas

Realiza acciones en múltiples entradas a la vez:

  1. Usa las casillas de verificación para seleccionar entradas en la lista de contenido

  2. Haz clic en el desplegable Acciones masivas

  3. Selecciona una acción:

    • Publicar - Establecer todos los seleccionados como publicados
    • Archivar - Establecer todos los seleccionados como archivados
    • Eliminar - Eliminar permanentemente los seleccionados
  4. Confirma la acción

Buscar y filtrar

Búsqueda

Usa el cuadro de búsqueda para encontrar contenido por título o contenido. La búsqueda no distingue entre mayúsculas y minúsculas y coincide con palabras parciales.

Filtros

Filtra la lista de contenido por:

  • Estado - Borrador, Publicado, Archivado
  • Rango de fechas - Fechas de creación o modificación
  • Autor - Quién creó el contenido
  • Taxonomía - Asignaciones de categoría o tag

Haz clic en Limpiar filtros para resetear.

Programar contenido

Programa contenido para publicar en una fecha futura:

  1. Crea o edita contenido

  2. Establece el estado en Borrador

  3. Establece la Fecha de publicación en una fecha y hora futuras

  4. Haz clic en Guardar

Cuando llegue la fecha de publicación, el contenido se publica automáticamente.

Eliminar contenido

Elimina contenido desde la pantalla de edición o la lista de contenido:

Desde el editor

  1. Abre el contenido que quieres eliminar

  2. Haz clic en Eliminar en la barra de herramientas

  3. Confirma la eliminación

Desde la lista

  1. Selecciona entradas usando casillas de verificación

  2. Haz clic en Acciones masivas > Eliminar

  3. Confirma la eliminación

API de contenido

Para acceso programático, usa la API de administración de EmDash.

Crear contenido

La siguiente solicitud crea un post borrador:

POST /_emdash/api/content/posts
Content-Type: application/json
Authorization: Bearer YOUR_API_TOKEN

{
  "title": "Mi nuevo post",
  "slug": "mi-nuevo-post",
  "content": "<p>Contenido del post aquí</p>",
  "status": "draft"
}

Actualizar contenido

La siguiente solicitud actualiza un post existente y lo publica:

PUT /_emdash/api/content/posts/mi-nuevo-post
Content-Type: application/json
Authorization: Bearer YOUR_API_TOKEN

{
  "title": "Título actualizado",
  "status": "published"
}

Eliminar contenido

La siguiente solicitud elimina permanentemente un post:

DELETE /_emdash/api/content/posts/mi-nuevo-post
Authorization: Bearer YOUR_API_TOKEN

Traducir contenido

Cuando i18n está habilitado, puedes crear traducciones de cualquier entrada de contenido.

Crear una traducción

  1. Abre la entrada de contenido que quieres traducir

  2. En la barra lateral del editor, encuentra el panel Translations

  3. Haz clic en Traducir junto al idioma objetivo

  4. Edita el contenido pre-rellenado — ajusta el título, slug y cuerpo para el nuevo idioma

  5. Haz clic en Guardar

La nueva traducción está vinculada a la entrada original y comienza como borrador. Publícala independientemente cuando la traducción esté lista.

Cambiar entre traducciones

El panel de Traducciones muestra todos los idiomas configurados. Haz clic en Editar junto a cualquier traducción existente para navegar directamente a ella. El idioma actual está marcado con una marca de verificación.

Filtro de idioma

En la lista de contenido, usa el desplegable de idioma en la barra de herramientas para filtrar entradas por idioma. Cada entrada muestra su idioma en una columna dedicada.

Cada traducción tiene su propio slug, estado e historial de revisiones. Publica, programa y gestiona traducciones de forma independiente.

Consulta la guía de Internacionalización para detalles completos sobre configuración, consultas y el selector de idioma.

Próximos pasos