Creación de Páginas y Subpáginas
BaP Framework simplifica la creación de páginas y subpáginas sin requerir código complejo de componentes. Al estructurar carpetas estáticas bajo el directorio de páginas, el servidor web y Gulp se encargan de servirlas y optimizarlas de forma automática.
Regla de Estructura de Directorios
Para crear una nueva ruta navegable en la aplicación, sigue esta regla:
- Cada Página es un Directorio: Crea un nuevo directorio bajo
./src/pages/. El nombre de la carpeta definirá la URL de acceso (por ejemplo,./src/pages/perfil/será accesible desde{dominio}/pages/perfil/). - Subpáginas Anidadas: Si deseas estructurar páginas internas (ej.
/pages/perfil/ajustes), crea subdirectorios bajo el directorio de la página padre (ej../src/pages/perfil/ajustes/).
Todas las páginas o subpáginas que contengan textos estáticos deben quedar configuradas obligatoriamente mediante el motor de internacionalización (i18n). No se permiten textos crudos codificados directamente en los archivos HTML. Todo el contenido descriptivo y metadatos deben definirse en el diccionario central es-ES.js y enlazarse en el HTML usando tokens formativos (ej. {page.pages.body.title}).
Estructura Espejo Obligatoria por Página
Siguiendo la metodología de la Landing Page principal, cada carpeta de página debe contener tres archivos mínimos:
./src/pages/mi-nueva-pagina/
├── index.html # Estructura e inyección de Custom Components
├── index.js # Script de bootstrap local (registra y arranca el core)
└── index.css # Hoja de estilos local (importa los estilos base y añade los locales)Registro de Rutas y Telemetría (bap.config.json)
Cada nueva página que se cree en la aplicación debe registrarse en el archivo maestro de configuración bap.config.json para que el enrutador y el motor de analíticas la reconozcan:
- Ruta (
routes.appRoutes): Agrega un nuevo nodo con la clave de tu página, definiendo supathname(ej./pages/mi-nueva-pagina/):"miNuevaPagina": { "pathname": "/pages/mi-nueva-pagina/", "component": null, "navigation": "REDIRECT", "validate": { "signIn": false } } - Analíticas (
analytics.customEvents): Agrega el evento de tipoenter_pagepara registrar la telemetría de entrada:"enterMiNuevaPagina": { "type": "enter_page", "name": "enter_mi_nueva_pagina", "func": "mi_nueva_pagina", "userType": "User" }
Cómo Incorporar los Recursos del Framework
Los archivos locales de cada página llaman a los recursos globales de la siguiente manera:
1. En el archivo CSS (index.css)
Importa los estilos y variables centrales usando la directiva de importación de CSS en la primera línea:
@import url(../../style/main.css);
/* Define aquí tus estilos específicos para esta página */
.mi-clase-local {
border: 1px solid var(--accent-color);
}2. En el archivo JS (index.js)
Importa el orquestador de componentes, la analítica y el core para inicializar la vista de forma controlada:
import { setCustomComponents } from "../../_components/customComponentsRegistration.js";
import { sessionStartedControl } from "../../_main/router.js";
import { routes } from "../../_main/routerPaths.js";
import { applyI18n } from "../../_main/i18n.js";
import { analytic } from "../../_main/analytics.js";
// 1. Control de accesos y sesión local vinculada a su ruta
sessionStartedControl(routes.miNuevaPagina, false);
// 2. Registro dinámico de Custom Components de la raíz en el DOM
setCustomComponents();
// 3. Activación de traducción asíncrona
applyI18n(() => {
// Procesamiento opcional de textos localizados
});
// 4. Registro de telemetría de entrada en la página al cargarse
window.addEventListener("load", () => {
analytic.logEvent.enterMiNuevaPagina();
});3. En el archivo HTML (index.html)
Vincula tu CSS y JS locales, e incorpora las etiquetas de Custom Components nativos directamente en tu maquetación e internacionaliza usando tokens:
<!DOCTYPE html>
<html lang="{lang}">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="{page.mi_pagina.head.meta.description}" />
<meta name="keywords" content="{page.mi_pagina.head.meta.keywords}" />
<!-- Open Graph -->
<meta property="og:title" content="{page.mi_pagina.head.meta.title}" />
<meta property="og:description" content="{page.mi_pagina.head.meta.description}" />
<meta property="og:image" content="https://cdn-bap-framework.web.app/commons/gonzaloarenasf-rrss-profile" />
<meta property="og:url" content="https://bap-framework.gonzaloarenasf.cl/pages/mi-pagina/" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{page.mi_pagina.head.meta.title}" />
<meta name="twitter:description" content="{page.mi_pagina.head.meta.description}" />
<meta name="twitter:image" content="https://cdn-bap-framework.web.app/commons/gonzaloarenasf-rrss-profile" />
<!-- Canonical & Resources -->
<link rel="canonical" href="https://bap-framework.gonzaloarenasf.cl/pages/mi-pagina/" />
<link rel="stylesheet" href="index.css" />
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" />
<link rel="manifest" href="/assets/site.webmanifest" />
<script type="module" src="index.js?v=v2.4.0"></script>
<title>{page.mi_pagina.head.title}</title>
</head>
<body class="light-mode">
<bap-header></bap-header>
<main>
<h1>{page.mi_pagina.body.titulo}</h1>
<bap-spinner></bap-spinner>
</main>
<bap-footer></bap-footer>
</body>
</html>Compilación Automática
Al compilar la aplicación con npm run optimize o npm run optimize:prod, Gulp lee la carpeta ./src/pages/, minifica y optimiza los HTML, concatena el CSS y obfuscación/minificación del JS depositando el bundle final en ./public/pages/{subpage}/.