Saltar al contenido principal

Introducción

Gestiona las páginas del sitio web y las pantallas de la aplicación móvil con contenido dinámico.

🎯 ¿Qué hace este módulo?​

El módulo Pages te permite crear, recuperar y gestionar páginas (para sitios web) o pantallas (para aplicaciones móviles) con todo su contenido: texto, imágenes, configuraciones de SEO y atributos personalizados.

Piénsalo como tu sistema de gestión de contenido: en lugar de codificar las páginas de forma rígida, las gestionas en OneEntry y las recuperas dinámicamente en tu aplicación.

📖 Explicación Simple​

Imagina que estás construyendo un sitio web con estas páginas:

  • 🏠 Página de inicio - página principal de aterrizaje
  • 📄 Sobre nosotros - información de la empresa
  • 📞 Contacto - página del formulario de contacto
  • 📝 Publicaciones del blog - múltiples páginas de artículos
  • ❓ Preguntas frecuentes - centro de ayuda

En lugar de crear cada página manualmente en tu código, tú:

  • ✅ Creas páginas en el panel de administración de OneEntry (con contenido, imágenes, SEO)
  • ✅ Recuperas páginas dinámicamente usando este módulo
  • ✅ Actualizas contenido sin volver a desplegar tu aplicación
  • ✅ Gestionas la estructura de la página, URLs y metadatos en un solo lugar

Ejemplo del mundo real:

Sin el Módulo Pages (codificado):
- Editar página de inicio → Cambiar código → Probar → Desplegar → Esperar ❌
- 10 páginas = 10 archivos de código para gestionar ❌
- Cambios de SEO = cambios en el código ❌

Con el Módulo Pages (dinámico):
- Editar página de inicio → Actualizar en el panel de administración de OneEntry → En vivo al instante ✅
- 100 páginas = recuperar dinámicamente desde la API ✅
- Cambios de SEO = actualizar en el panel de administración ✅

✨ Conceptos Clave​

¿Qué es una Página?​

Una página es una entidad de contenido que representa:

  • Web: Una página en tu sitio web (por ejemplo, /about, /contact)
  • Móvil: Una pantalla en tu aplicación (por ejemplo, Pantalla de Perfil, Pantalla de Configuración)

Cada página contiene:

  • Contenido - Texto, imágenes, videos
  • URL - Dirección de la página (por ejemplo, /about-us)
  • SEO - Título meta, descripción, palabras clave
  • Atributos personalizados - Cualquier campo adicional que definas
  • Estado - Publicada, borrador, archivada
  • Localización - Soporte multilingüe

Tipos de Página​

OneEntry soporta diferentes tipos de páginas:

TipoDescripciónEjemplo de Uso
Página NormalPágina estática estándarSobre, Contacto, Términos
Página de ErrorPáginas de error 404, 500Página No Encontrada
Página del SistemaPáginas especialesPolítica de Privacidad, Cookies
Página de PlantillaEstructura de página reutilizablePlantilla de publicación de blog

Jerarquía de Páginas​

Las páginas pueden organizarse en una estructura de árbol:

📁 Empresa
  ├─ Sobre Nosotros
  ├─ Equipo
  └─ Carreras

📁 Productos
  ├─ Categoría de Producto 1
  │   ├─ Producto A
  │   └─ Producto B
  └─ Categoría de Producto 2

Por qué esto es importante: Puedes recuperar todas las páginas en una sección o construir menús de navegación automáticamente.

📋 Lo Que Necesitas Saber​

Dos Maneras de Identificar Páginas​

MétodoCuándo UsarEjemplo
Por URLEl usuario visita una página específica/about-us, /contact
Por IDReferencias internas123, 456

Mejor práctica: Usa id en el código (no cambian), usa URLs para el enrutamiento.

Estructura de la Página​

Cada página tiene estos campos clave:

{
  "id": 9,                        // ID único
  "parentId": 8,                  // ID del padre
  "moduleFormConfigs": [],        // Configuraciones del módulo de formularios
  "pageUrl": "blog1",             // URL de la página
  "depth": 1,                     // profundidad
  "localizeInfos": {              // información de localización
    "title": "Blog 1",            // título
    "menuTitle": "Blog 1",        // título del menú
    "htmlContent": "",
    "plainContent": "",
  },
  "isVisible": true,              // visibilidad
  "blocks": [],                   // bloques
  "type": "common_page",          // tipo de página
  "templateIdentifier": null,     // identificador de plantilla
  "attributeSetIdentifier": null, // identificador de conjunto de atributos
  "attributeValues": {},          // valores de atributos
  "isSync": false,                // sincronización
}

Localización (Multilenguaje)​

Las páginas soportan múltiples idiomas

¡La misma página, diferentes idiomas!

Atributos Personalizados​

Puedes agregar cualquier campo a las páginas usando AttributesSets:

Ejemplos:

  • Publicaciones del blog: autor, fecha de publicación, etiquetas, imagen destacada
  • Páginas de productos: precio, SKU, galería, especificaciones
  • Páginas de aterrizaje: imagen principal, botones de CTA, testimonios

Aprende más: Consulta el Módulo AttributesSets

📊 Tabla de Referencia Rápida - Métodos Comunes​

MétodoQué HaceCuándo Usar
getPages()Obtener todas las páginas (paginadas)Construir mapa del sitio, listar todas las páginas
getRootPages()Obtener todas las páginas raíz (paginadas)
getChildPagesByParentUrl()Obtener todas las páginas hijas por ParentUrl (paginadas)
getBlocksByPageUrl()Obtener objetos PositionBlock para la página por URL.Los bloques se utilizan para renderizar el contenido de la página.
getConfigPageByUrl()Obtener configuraciones para la página por URL.Las páginas de configuración se utilizan para almacenar configuraciones para la página.
getPageById()Obtener una sola página.Las páginas se utilizan para renderizar la página.
getPageByUrl()Obtener una sola página por URL.Las páginas se utilizan para renderizar la página.
searchPage()Búsqueda rápida de páginas con salida limitada.Buscar páginas por título, descripción, etiquetas, etc.

❓ Preguntas Comunes (FAQ)​

¿Cuál es la diferencia entre URL y Marcador?​

  • URL (pageUrl) - La dirección web que ven los usuarios (por ejemplo, /about-us, /contact)

    • Usado para el enrutamiento
    • Amigable para el usuario

  • Marcador - Identificador técnico en el código (por ejemplo, homepage, contact_page)

    • Usado en referencias de código
    • Técnico, no visible para el usuario

💡 Notas Importantes​

URLs de Páginas y Enrutamiento​

Mejor práctica para el enrutamiento:

✅ Bueno: Ruta dinámica de captura total Ejemplo de Next.js: pages/[...slug].js

Caché para Rendimiento​

Reduce las llamadas a la API con caché.

Previsualización de Borradores​

Muestra páginas borrador solo a los administradores.

🎓 Mejores Prácticas​

  • Almacena en caché las páginas para reducir las llamadas a la API
  • Maneja los errores 404 de manera elegante
  • Filtra por statusId: 1 y isVisible: true para producción
  • Agrega estados de carga en la interfaz de usuario
  • Implementa una estrategia de caché de páginas

Más información sobre la interfaz de usuario del módulo https://doc.oneentry.cloud/docs/category/pages

Definición del módulo Pages​


const { Pages } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

🔗 Documentación Relacionada​