WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 16.09.2017 10:52:18

florian
Projektmanagement und Support WBCE CMS

Neu in WBCE CMS 1.3: Platzhalter für JS, CSS, HTML ... und mehr

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;

Offline

#2 16.09.2017 18:53:03

norhei
Developer

Re: Neu in WBCE CMS 1.3: Platzhalter für JS, CSS, HTML ... und mehr

Bleibt noch hinzuzufügen das das + und - eine Bedeutung hat.
Bei + wird der Inhalt am Anfang des Blocks eingefügt , bei - am Ende.

Offline

#3 17.09.2017 07:42:33

norhei
Developer

Re: Neu in WBCE CMS 1.3: Platzhalter für JS, CSS, HTML ... und mehr

Und das die Tags eindeutig Groß- und Kleinschreibung beachten (Case sensitiv) sind und auch ansonsten keine Fehlertoleranz haben.

Offline

#4 17.09.2017 10:19:24

norhei
Developer

Re: Neu in WBCE CMS 1.3: Platzhalter für JS, CSS, HTML ... und mehr

Hinweis: Exakte Doubletten werden jetzt beim MOVE filter ignoriert.

Wenn Also ein Modul in einer Seite mehrmals aufgerufen wird und exakt das gleiche Schript dadurch mehrmals Laden würde , werden die zusätzlichen Aufrufe ignoriert. Es wird nur der Jeweils Letzte genommen.

Bei REPLACE ist das ja egal da einfach nur der selbe Block mehrfach mit dem gleichen Inhalt überschrieben würde.

Offline

Liked by:

stefanek, florian

#5 18.09.2017 09:38:49

webbird
Developer

Re: Neu in WBCE CMS 1.3: Platzhalter für JS, CSS, HTML ... und mehr

Sehr nützlich. thumb_up Genau das brauche ich für den Nachfolger von wbProfiles, der als Hybridmodul unter BC1, BC2 und WBCE lauffähig sein soll. Wobei ich mir dann jetzt überlegen muß, wie ich das einbaue; in WBCE wären das ja quasi Template-Anweisungen, während es in BC* Funktionsaufrufe sind. Aber da fällt mir schon was ein.


Some people just need a high-five. In the face. With a chair.

Offline

Board footer

Powered by FluxBB

up