CSS y JavaScript
Servido minificado
Los visitantes reciben el CSS y el JS minificados (con esbuild): se eliminan los espacios y los comentarios, y las variables locales reciben nombres cortos; los archivos son más pequeños y más difíciles de leer. En el admin, tu código fuente no cambia. Los nombres globales (p. ej. funciones que llama onclick="…") y los comentarios de licencia (/*! … */, @license) se conservan. Si un archivo tiene un error de sintaxis, se sirve sin cambios y el error se anota en el log del servidor. Lo mismo vale para la exportación estática.
Minificar no protege realmente el código: lo que se ejecuta en el navegador siempre se puede leer, solo que con más esfuerzo.
La biblioteca
Los archivos CSS y JS están centralizados en CSS & JS. Allí ves cuántas páginas y Snippets usan un archivo, y puedes editarlo, renombrarlo o eliminarlo. Con una Carpeta junto al nombre agrupas la lista, p. ej. por proyecto. Las carpetas se pueden contraer.
Asignar archivos a páginas
En el editor de páginas, en las pestañas CSS y JS:
- Nuevo archivo: crea un archivo y lo asigna a la página.
- Añadir existente: asigna un archivo de la biblioteca.
- heredar: el archivo se carga también en todas las subpáginas. Lo ideal: la hoja de estilos principal, una sola vez en la página de inicio, heredada.
- Flechas: cambiar el orden (importante en CSS que se sobrescribe).
- ✕: quitar la asignación (el archivo se queda en la biblioteca).
Los archivos heredados aparecen con el aviso heredado de «…» y también se pueden editar directamente. Si un archivo se usa en varias páginas, el editor lo indica: cada cambio se aplica en todas partes.
Los archivos también se pueden asignar a Snippets; entonces solo se cargan en las páginas que realmente incluyen el Snippet; consulta CSS y JS en Snippets.
Orden de carga
- Los archivos heredados de los antecesores (desde la página de inicio hacia abajo),
- después, los propios de la página en el orden configurado,
- después, los de los Snippets usados (en el orden en que aparecen los Snippets por primera vez).
El CSS va en el <head> y el JavaScript al final del <body>. Las asignaciones duplicadas se cargan una sola vez.
Cargar archivos en un lugar concreto
Si necesitas un archivo en una posición exacta, por ejemplo un script que debe ir antes de un script en línea, inclúyelo en el HTML:
<script src="{{ asset_url(7) }}"></script>
<link rel="stylesheet" href="{{ asset_url(3) }}">
asset_url devuelve una URL versionada; tras cada cambio, el navegador carga la versión nueva. El ID lo ves en la biblioteca, en la barra de direcciones (#/assets/7).
Los archivos CSS y JS no son templates: {{ … }} dentro de ellos no se evalúa.