Ir al contenido
ComStack

Páginas personalizadas en ComStack

Qué es esto

Una página personalizada es una página de ComStack cuyo cuerpo es totalmente tu propio código: un componente Astro completo o un documento HTML, subido como un body_source opaco mediante la herramienta upload-custom-page. La plataforma nunca lo reescribe: lo que creas es lo que se publica (se aplica la compilación estándar de Astro; los cuerpos en HTML plano se procesan a través de un analizador compatible con estándares). El diseño, el estilo, la animación y la interactividad son totalmente tuyos.

Las páginas personalizadas existen para todo lo que una plantilla de markdown estructurada no puede expresar: páginas de destino, lanzamientos de productos, demos interactivas, calculadoras, elementos animados y páginas de marketing con mucha carga de marca. El resto del sitio (documentación, blogs, preguntas frecuentes) pertenece a las páginas de knowledge y sus plantillas; consulta Knowledge vs custom pages.

Qué es posible

Trata una página personalizada como un lienzo en blanco con una CDN rápida detrás:

  • Total libertad de diseño: tus propias cuadrículas, secciones, tratamientos de hero y tipografía. No se impone ninguna estructura de plantilla al cuerpo.
  • Animación: fotogramas clave CSS, efectos basados en scroll, transiciones, animación SVG. Las etiquetas <style> y <script> integradas se publican tal como se escribieron.
  • Interactividad: calculadoras en JS nativo, pestañas, acordeones, efectos de canvas, widgets tipo formulario. No se añade ni requiere tiempo de ejecución de frameworks.
  • Traducción automática: envuelve tus cadenas de texto visibles con marcadores y cada idioma configurado obtendrá una versión nativa de la página al publicar, con la misma estructura de URL y el hreflang correcto. Escribes la página una vez.
  • AEO de la plataforma gratis: los metadatos de título/descripción, JSON-LD, Open Graph, sitemap e inclusión en llms.txt son gestionados por la capa de la plataforma alrededor de tu cuerpo.

Una página generada en Lovable, v0 o Bolt —o escrita a mano, o por un agente de IA de una sola vez— puede estar activa en minutos: añade marcadores, sube y publica.

Cómo funciona

  1. Crea un componente Astro completo o un documento HTML en otro lugar (cualquier herramienta, cualquier agente).
  2. Marca las cadenas traducibles con <T key="…" default="…"> (Astro/JSX) o data-t-key (HTML): la subida las extrae a translatable_strings; la publicación las traduce a cada idioma configurado. Nunca traduzcas a mano. Consulta Traducción.
  3. Sube con upload-custom-page (project_id, project_name, slug, body_source, title 10–60 caracteres, description 50–160 caracteres). El resultado es un borrador: aún no hay nada publicado.
  4. Publica con el flujo estándar de dos pasos: publish (manifiesto de prueba + token de confirmación) → publish-confirm → consulta publish-status. Consulta Publicación.

Volver a subir el mismo slug reemplaza el cuerpo en una sola llamada; la URL activa permanece hasta que publiques el nuevo borrador.

Límites estrictos

Tres restricciones son innegociables, por diseño:

  1. El cuerpo es opaco, pero el sobre no. Tu código se renderiza dentro de la capa de la plataforma que proporciona metadatos <head>, etiquetas AEO, enrutamiento de idioma y encabezados de seguridad. Tú creas el contenido a nivel de <body>, no el encabezado del documento.
  2. Los esquemas href peligrosos se rechazan al subir. Las URLs javascript:, data: y vbscript: en atributos href/xlink:href fallan directamente al subir; el cuerpo se envía al navegador tal como se escribió, por lo que la puerta está en la entrada. Las URLs data: en src (imágenes integradas) están permitidas. Consulta Solución de problemas.
  3. La calidad está limitada, no se espera. Las páginas personalizadas se auditan con Lighthouse con un estándar de 95 en rendimiento, accesibilidad, mejores prácticas y SEO antes de publicar. Construye bajo ese estándar desde la primera línea. Consulta Puertas de calidad.

Cuándo usarlo

  • Una página de destino o campaña que no debe parecerse al resto del sitio
  • Una página de lanzamiento de producto con animaciones y efectos de scroll a medida
  • Una página interactiva (calculadora, configurador, cuestionario) en HTML/JS plano
  • Importar una exportación de diseño desde Lovable, v0 o Bolt
  • Cualquier página donde una plantilla de markdown sea la herramienta incorrecta

Para contenido editorial estructurado (documentación, artículos, preguntas frecuentes), usa una página de conocimiento; obtendrás plantillas, validación y JSON-LD de preguntas frecuentes que las páginas personalizadas no tienen.

Ejemplo

El cuerpo de página personalizada válido más pequeño (formulario HTML):

<section class="hero">
  <h1 data-t-key="hero.title">Fresh bread, every morning</h1>
  <p data-t-key="hero.sub">Family bakery in the old town since 1962.</p>
  <a class="cta" href="tel:+34600000000" data-t-key="hero.cta">Call the bakery</a>
</section>
<style>
  .hero { min-height: 60vh; display: grid; place-content: center; text-align: center; }
  .cta { display: inline-block; padding: .8rem 1.6rem; border-radius: 999px; background: #1a7f5a; color: #fff; }
</style>

Súbelo, publícalo y /es/ (además de cualquier otro idioma configurado) renderizará el mismo diseño con las cadenas traducidas sustituidas en las posiciones de los marcadores. Dos tutoriales totalmente anotados (mínimo y avanzado) están en Recetas.

Errores comunes

  • Errores de marcadores: las cadenas sin marcar permanecen sin traducir; los marcadores mal formados rechazan la subida con desplazamientos de caracteres. Consulta Traducción.
  • wrong_tool_knowledge_page: el slug ya pertenece a una página de markdown. Elige otro slug o edita esa página con update-page.
  • Fallos de Lighthouse: imágenes pesadas, scripts que bloquean el renderizado, falta de texto alternativo. Las correcciones son mecánicas; consulta Puertas de calidad.

El catálogo completo con mensajes exactos y soluciones: Solución de problemas.

Relacionado

Última actualización: