CSS et JavaScript
Servis minifiés
Les visiteurs reçoivent le CSS et le JS minifiés (avec esbuild) : les espaces et commentaires disparaissent, les variables locales reçoivent des noms courts – les fichiers deviennent plus petits et plus difficiles à lire. Dans l’admin, votre code source reste inchangé. Les noms globaux (p. ex. les fonctions appelées par onclick="…") et les commentaires de licence (/*! … */, @license) sont conservés. Si un fichier contient une erreur de syntaxe, il est servi tel quel et l’erreur est consignée dans le journal du serveur. Cela vaut aussi pour l’export statique.
La minification ne protège pas vraiment le code – ce qui s’exécute dans le navigateur peut toujours être lu, simplement plus péniblement.
La bibliothèque
Les fichiers CSS et JS sont centralisés sous CSS & JS. Vous y voyez par combien de pages et de Snippets un fichier est utilisé, et vous pouvez le modifier, le renommer ou le supprimer. Avec un Dossier à côté du nom, vous regroupez la liste, p. ex. par projet. Les dossiers peuvent être repliés.
Associer des fichiers aux pages
Dans l’éditeur de pages, dans les onglets CSS et JS :
- Nouveau fichier – crée un fichier et l’associe à la page.
- Ajouter un existant – associe un fichier de la bibliothèque.
- hériter – le fichier est aussi chargé sur toutes les sous-pages. Idéal : la feuille de style principale une seule fois sur la page d’accueil, héritée.
- Flèches – modifier l’ordre (important pour le CSS qui se surcharge).
- ✕ – retirer l’association (le fichier reste dans la bibliothèque).
Les fichiers hérités apparaissent avec la mention hérité de « … » et peuvent eux aussi être modifiés directement. Si un fichier est utilisé sur plusieurs pages, l’éditeur le signale – chaque modification s’applique partout.
Les fichiers peuvent aussi être associés à des Snippets – ils ne se chargent alors que sur les pages qui intègrent réellement le Snippet, voir CSS et JS dans les Snippets.
Ordre de chargement
- Les fichiers hérités des ancêtres (de la page d’accueil vers le bas),
- puis ceux de la page elle-même, dans l’ordre défini,
- puis ceux des Snippets utilisés (dans l’ordre où les Snippets apparaissent pour la première fois).
Le CSS est placé dans le <head>, le JavaScript à la fin du <body>. Les associations en double ne sont chargées qu’une fois.
Charger des fichiers à un endroit précis
Si vous avez besoin d’un fichier à une position exacte – par exemple un script qui doit précéder un script inline –, intégrez-le dans le HTML :
<script src="{{ asset_url(7) }}"></script>
<link rel="stylesheet" href="{{ asset_url(3) }}">
asset_url renvoie une URL versionnée ; après chaque modification, le navigateur charge la nouvelle version. Vous voyez l’ID dans la bibliothèque, dans la barre d’adresse (#/assets/7).
Les fichiers CSS et JS ne sont pas des templates – {{ … }} n’y est pas évalué.