CSS und JavaScript
Minifiziert ausgeliefert
Besucher bekommen CSS und JS minifiziert (mit esbuild): Leerraum und Kommentare fallen weg, lokale Variablen bekommen kurze Namen – die Dateien werden kleiner und schwerer lesbar. Im Admin bleibt dein Quelltext unverändert. Globale Namen (z. B. Funktionen, die onclick="…" aufruft) und Lizenzkommentare (/*! … */, @license) bleiben erhalten. Hat eine Datei einen Syntaxfehler, wird sie unverändert ausgeliefert und der Fehler im Server-Log vermerkt. Das gilt auch für den statischen Export.
Minifizieren schützt den Code nicht wirklich – was im Browser läuft, lässt sich immer lesen, nur eben mühsamer.
Die Bibliothek
CSS- und JS-Dateien liegen zentral unter CSS & JS. Dort siehst du, von wie vielen Seiten und Snippets eine Datei verwendet wird, und kannst sie bearbeiten, umbenennen oder löschen. Mit einem Ordner neben dem Namen gruppierst du die Liste, z. B. nach Projekt. Ordner lassen sich zuklappen.
Dateien Seiten zuordnen
Im Seiten-Editor in den Tabs CSS und JS:
- Neue Datei – legt eine Datei an und ordnet sie der Seite zu.
- Vorhandene hinzufügen – ordnet eine Datei aus der Bibliothek zu.
- vererben – die Datei wird auch auf allen Unterseiten geladen. Ideal: das Haupt-Stylesheet einmal an der Startseite, vererbt.
- Pfeile – Reihenfolge ändern (wichtig bei CSS, das sich überschreibt).
- ✕ – Zuordnung entfernen (die Datei bleibt in der Bibliothek).
Geerbte Dateien erscheinen mit dem Hinweis vererbt von „…“ und lassen sich ebenfalls direkt bearbeiten. Wird eine Datei auf mehreren Seiten verwendet, weist der Editor darauf hin – jede Änderung wirkt überall.
Dateien lassen sich auch Snippets zuordnen – dann laden sie nur auf Seiten, die das Snippet tatsächlich einbinden, siehe CSS und JS an Snippets.
Ladereihenfolge
- Vererbte Dateien der Vorfahren (von der Startseite abwärts),
- dann die eigenen der Seite in der eingestellten Reihenfolge,
- dann die der benutzten Snippets (in der Reihenfolge, in der die Snippets zuerst vorkommen).
CSS landet im <head>, JavaScript am Ende von <body>. Doppelte Zuordnungen werden nur einmal geladen.
Dateien an einer bestimmten Stelle laden
Brauchst du eine Datei an einer genauen Position – etwa ein Skript, das vor einem Inline-Skript stehen muss –, binde sie im HTML ein:
<script src="{{ asset_url(7) }}"></script>
<link rel="stylesheet" href="{{ asset_url(3) }}">
asset_url liefert eine versionierte URL; nach jeder Änderung lädt der Browser die neue Fassung. Die ID siehst du in der Bibliothek in der Adresszeile (#/assets/7).
CSS- und JS-Dateien sind keine Templates – {{ … }} darin wird nicht ausgewertet.