Stylesheets und Skripte #

Diese Seite richtet sich an Website-Ersteller, die einem Design ihr eigenes CSS und JavaScript hinzufügen. In Exponential werden diese Dateien nicht von Hand im Pagelayout verlinkt: Sie werden in design.ini aufgeführt und vom Packer von ezjscore geladen, der sie zusammenfasst, minimiert und jeder Version einen eigenen Dateinamen gibt.

Inhalt #

1. Die Listen in design.ini
2. Sie im Pagelayout laden
3. Der Packer
4. Nach einer Änderung
5. Skripte, die unter einer Content Security Policy funktionieren
6. Checkliste

Die Listen in design.ini #

In Ihrer Design-Erweiterung, settings/design.ini.append.php:

<?php /* #?ini charset="utf-8"?
[ExtensionSettings]
DesignExtensions[]=mysite_design

[StylesheetSettings]
CSSFileList[]=main.css
CSSFileList[]=print.css

[JavaScriptSettings]
JavaScriptList[]=ezjsc::jquery
JavaScriptList[]=main.js
*/ ?>

ezjsc::jquery ist das eigene jQuery von ezjscore, Sie liefern also keine Kopie mit. Das mitgelieferte Theme simple ist ein echtes Beispiel: extension/sevenx_themes_simple/settings/design.ini.append.php.

Sie im Pagelayout laden #

{ezcss_load( array( ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' ),
                    ezini( 'StylesheetSettings', 'FrontendCSSFileList', 'design.ini' ) ) )}
...
{ezscript_load( array( ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ),
                       ezini( 'JavaScriptSettings', 'FrontendJavaScriptList', 'design.ini' ) ) )}

Ein Template, das für sich selbst eine weitere Datei braucht, fordert sie mit {ezcss_require( 'gallery.css' )} oder {ezscript_require( 'gallery.js' )} an; ezcss_load/ezscript_load im Pagelayout bindet sie dann ein. Die vier Funktionen sind in extension/ezjscore/autoloads/ezjscpackertemplatefunctions.php definiert.

Der Packer #

Der Packer wird in extension/ezjscore/settings/ezjscore.ini eingestellt:

Mit eingeschaltetem Packer verlinkt die Seite eine zusammengefasste Datei je Liste; ausgeschaltet (Entwicklung) jede Datei einzeln, was die Fehlersuche erleichtert.

Nach einer Änderung #

Weil gepackte Dateien und die Cache-Blöcke des Pagelayouts sich die alten Dateinamen merken, braucht eine Änderung an einem Stylesheet:

php bin/php/ezcache.php --clear-id=ezjscore-packer --allow-root-user
php bin/php/ezcache.php --clear-tag=template --allow-root-user
php bin/php/ezcache.php --clear-id=template-block --allow-root-user

Laden Sie die Seite dann vollständig neu (Hard Reload). Hängen Sie kein ?v=... an Links an; die Änderungszeit im Dateinamen erledigt das bereits.

Skripte, die unter einer Content Security Policy funktionieren #

Die mitgelieferte Policy erlaubt, wenn Sie sie für eine Website einschalten, nur Skript- und Stylesheet-Dateien der Website selbst (script-src 'self', style-src 'self'): kein Inline-Code in <script>, keine Attribute on...=, kein style="" (Content Security Policy). Schreiben Sie die Website von Anfang an so:

Checkliste #

• To do: Jede CSS- und JS-Datei ist in design.ini aufgeführt, keine ist von Hand verlinkt.
• To do: Keine Inline-Skripte, keine Attribute on... und kein style="" in Ihren Templates.
• To do: Der Packer ist für den Produktivbetrieb eingeschaltet (DevelopmentMode aus).
• To do: Nach einer Änderung: Packer-, Template- und Template-Block-Caches geleert, Hard Reload.
• To do: Skripte und Schriften von Drittanbietern sind auf Datenschutz geprüft und in der Policy erlaubt.

Verwandte Seiten #

• Das Pagelayout
• ezjscore
• jQuery 4 und die Entfernung von YUI
• Content Security Policy für Anwendungen
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.