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 el contenido sin volver a desplegar tu aplicación
  • ✅ Gestionas la estructura de la página, las URL y los metadatos en un solo lugar

Ejemplo del mundo real:

Without Pages Module (hardcoded):
- Edit homepage → Change code → Test → Deploy → Wait ❌
- 10 pages = 10 code files to manage ❌
- SEO changes = code changes ❌

With Pages Module (dynamic):
- Edit homepage → Update in OneEntry admin → Live instantly ✅
- 100 pages = fetch dynamically from API ✅
- SEO changes = update in admin panel ✅

✨ 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 ComúnPágina estática estándarSobre, Contacto, Términos
Página de CatálogoPáginas de catálogoPáginas de catálogo
Página ExternaPáginas externasPáginas externas
Página de ErrorPáginas de error 404, 500Página No Encontrada

Jerarquía de Páginas​

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

📁 Company
  ├─ About Us
  ├─ Team
  └─ Careers

📁 Products
  ├─ Product Category 1
  │   ├─ Product A
  │   └─ Product B
  └─ Product Category 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,                        // unique ID
  "parentId": 8,                  // parent ID
  "moduleFormConfigs": [],        // Forms module configurations
  "pageUrl": "blog1",             // page URL
  "depth": 1,                     // depth
  "localizeInfos": {              // localization info
    "title": "Blog 1",            // title
    "menuTitle": "Blog 1",        // menu title
    "htmlContent": "",
    "plainContent": "",
  },
  "isVisible": true,              // visibility
  "blocks": [],                   // blocks
  "type": "common_page",          // page type
  "templateIdentifier": null,     // template identifier
  "attributeSetIdentifier": null, // attribute set identifier
  "attributeValues": {},          // attribute values
  "isSync": false,                // sync
}

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 e ID?​

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

    • Usado para el enrutamiento
    • Amigable para el usuario

  • ID - Identificador técnico en el código (por ejemplo, 123, 124)

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

💡 Notas Importantes​

URLs de Página y Enrutamiento​

Mejor práctica para el enrutamiento:

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

Caching para Rendimiento​

Reduce las llamadas a la API con caching.

Previsualización de Borradores​

Muestra páginas borrador solo a los administradores.

🎓 Mejores Prácticas​

  • Cachea páginas para reducir llamadas a la API
  • Maneja errores 404 de manera adecuada
  • Filtra por statusId: 1 y isVisible: true para producción
  • Agrega estados de carga en la interfaz de usuario
  • Implementa una estrategia de caching 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​