WBCE CMS Forum

In den Templates und BE-Themes können ab Version 1.3 durch Module HTML-Code, CSS/JS-Abschnitte bzw. -Links, Metadaten usw. auf einfache Weise geändert bzw. ergänzt werden.

Im Grunde ist es "nur" eine Erweiterung des "CSS to head"-Filters, der es ermöglicht, aus Modulen, Snippets, Droplets, Code2-Abschnitten Ergänzungen an  fest definierten Positionen im Template vorzunehmen.
Dies erfolgt in einem zweistufigen Prozess. Zunächst werden in jedem Template automatisch die u.g. Platzhalter ergänzt, sofern diese noch nicht vorhanden sind. (Dies dient der Bequemlichkeit bzw. Abwärtskompatibilität, grundsätzlich ist es besser, die u.g. Platzhalter selbst an den dafür vorgesehenen Stellen im Template einzufügen.) Es können auch eigene Platzhalter definiert werden.

Die Syntax ist sehr einfach. Bei den Platzhaltern handelt es sich um HTML-Kommentare, deren Inhalt jeweils mit (PH) beginnt, dann der Code-Art (Metatag, CSS, JavaScript, HTML), für die der Platzhalter steht, der Positionierung (HEAD / BODY, dann der Reihenfolge (TOP / BTM (d.h. bottom=unten), und einem Plus für den Beginn und einem Minus für das Ende des jeweiligen Platzhalters. D.h. ein Platzhalter muss logischerweise immer aus zwei Teilen, Beginn und Ende bestehen. In diesem wird dann später ggf. der jeweilige Code durch den Filter eingefügt.

Diese Platzhalter stehen standardmäßig zur Verfügung:

<!--(PH) TITLE+ -->
<!--(PH) TITLE- -->

<!--(PH) META DESC+ -->
<!--(PH) META DESC- -->

<!--(PH) META KEY+ -->
<!--(PH) META KEY- -->

<!--(PH) META HEAD+ -->
<!--(PH) META HEAD- -->

<!--(PH) CSS HEAD TOP+ -->
<!--(PH) CSS HEAD TOP- -->

<!--(PH) JS HEAD TOP+ -->
<!--(PH) JS HEAD TOP- -->

<!--(PH) CSS HEAD BTM+ -->
<!--(PH) CSS HEAD BTM- -->

<!--(PH) JS HEAD BTM+ -->
<!--(PH) JS HEAD BTM- -->

<!--(PH) JS BODY TOP+ -->
<!--(PH) JS BODY TOP- -->

<!--(PH) HTML BODY TOP+ -->
<!--(PH) HTML BODY TOP- -->

<!--(PH) HTML BODY BTM+ -->
<!--(PH) HTML BODY BTM- -->

<!--(PH) JS BODY BTM+ -->
<!--(PH) JS BODY BTM- -->

Zwischen diesen Teilen kann dann Code, der irgendwo in einer tool.php oder einem Code-Abschnitt steht oder von einem Droplet generiert wird,
a) mit MOVE an die erforderliche Position verschoben werden:

<!--(MOVE) CSS HEAD BTM- -->
<style> .beipiel {color:red} </style>
<!--(END)-->

<!--(MOVE) JS HEAD BTM+ -->
<!-- Just a comment -->
<script>alert('Hello!');</script>
<!--(END)-->

<!--(MOVE) CSS HEAD BTM+ -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<!--(END)-->

b) mit REPLACE standardmäßig vom Template und/oder Seitenmodulen generierter Code ersetzt werden:

<!--(REPLACE) TITLE -->
<title>Anderer Titel</title>
<!--(END)-->

<!--(REPLACE) META DESC -->
<meta name="description" content="Andere Beschreibung"/>
<!--(END)-->

So ist es sehr einfach möglich, Javascript- und CSS-Code aus Modulen, Snippets, Droplets heraus valide und syntaktisch korrekt einzubinden.

Im letzten Schritt läuft ein weiterer Filter über die Seite und entfernt die Platzhalter-Kommentare, sodass im diese im final generierten Output nicht mehr enthalten sind. (Diese Funktion kann zu Debugzwecken in der Outputfilterverwaltung deaktiviert werden.)

Verwendung in Modulen
Mit dem oben erklärten Platzhalter-System sind Module nicht mehr auf die statischen frontend.js / frontend.css Dateien angewiesen. Auch das Laden von .css Dateien über Javascript wird unnötig, genauso Skripte wie head.js. Ein schönes Beispiel ist das neue Colorbox-Modul, das momentan noch im Teststatus ist.
https://forum.wbce.org/viewtopic.php?id=1589

Verwendung in Droplets und Snippets
Mit den oben erwähnten Platzhaltern können Droplets und Snippets, unabhängig davon wo sie aufgerufen werden, ihre eigenen JS- und CSS-Dateien laden, Metatags erzeugen oder ersetzen, HTML-Schnipsel ins Template einfügen.

Beispiel: Droplet zum Laden von Jquery:

$return='
<!--(MOVE) JS HEAD TOP+ -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--(END)-->';
return $return;