i

Kapitelspezifische/Seitenspezifische Skripte und CSS-Stile

Mit der Umstellung auf Kirby ist es nun möglich auf jeder Unterseite lokale JavaScript-Dateien zu verwenden und selbst CSS-Stile nachzuladen. Um die Verwaltung dieser Materialien zu erleichtern, müssen sie die folgenden Dateinamen haben:

_skripte.js
_stile.css
Sind Dateien mit diesem Namen (auch einzeln) vorhanden, so werden sie auf der entsprechenden Seite geladen. Alternative Lademöglichkeiten werden nicht unterstützt. Gerade bei dieser Art Dateien kommt es auf die Reihenfolge an und so wird z.B. das lokale JavaScript als letztes geladen, wenn bereits alle Frameworks vorhanden sind. So kann unter anderem auch auf die Frameworks (z.B. jQuery) zurückgegriffen werden. Zusätzlich liegt weiterhin eine Aufteilung zwischen Inhalt und Programmierung/Darstellung vor. Da in Zukunft die Dateien noch verknüpft werden sollen, um die Anzahl Requests an den Server zu verringern, kann auch hier nur mit einer automatisierten Variante weiter verfahren werden.

Kapiteldateien

Pro Seitenaufruf werden – sofern vorhanden – auch die Dateien _stile.css und _skripte.js der Kapitelseite (Ebene 2) mit geladen. Z.B. würde für Kapitel 2.3 die folgenden beiden Dateien auf jeder Unterseite geladen:
content/2-programmierung/3-oopjava/_skripte.js
content/2-programmierung/3-oopjava/_stile.css
Dies macht es möglich pro Kapitel Stile und Skripte festzulegen, die auf allen Unterseiten verfügbar sind und vermeidet Codeduplikation. Bitte verwende einen eigenen Prefix für CSS-Klassen, z.B. dein Autorenkürzel. Solltest du JavaScript auf Basis von VueJS einbinden wollen, so muss es sich um eine saubere VueComponent handeln, VueJS selbst darf nicht noch einmal eingebunden werden, weil das Schulbuch es für seine globalen Elemente verwendet und sonst Konflikte entstehen. Bei Fragen wendest du dich am besten an OS.

Suche

v
15.6.3.6
schuljahr.inf-schule.de/2023-24/infschule/dokumentation/kapitel-erstellen/lokales-css-js
schuljahr.inf-schule.de/2023-24/15.6.3.6
schuljahr.inf-schule.de/2023-24/@/page/2uTyqvb8lkvtnAIa

Rückmeldung geben