Modify

Sie können das HTML eines Blocks oder Layouts modifizieren, ohne den Block oder das Layout überschreiben zu müssen. Dazu setzen Sie z.B. in den Block Eigenschaften die Einstellung modify, welche Elemente mit den Eigenschaften für selector, attribute, value, node, wrapper oder inner erwartet.

 

Attribute erweitern (value)

In diesem Beispiel wird im HTML des Blocks input_submit das Attribut class gesucht und um button color erweitert. Wenn Sie ein anderes Attribut als class verwenden, wird der Wert hingegen überschrieben.

{ "blocks": { "input_submit": { "modify": [{ "selector": "input", "attribute": "class", "value": "button color" }] } } }

In diesem Beispiel wird im HTML des Blocks input_submit das Element input gesucht und darum das HTML <div>...</div> gesetzt. <%> ist hierbei der Platzhalter für das Ziel Element.

HTML erweitern (wrapper, inner)

check

Das HTML außerhalb und innerhalb der Elemente, die mit Hilfe des selectors ausgewählt werden, kann modifiziert werden.

Im ersten Beispiel wird im HTML des Blocks input_submit das Element input gesucht und darum das HTML <div>...</div> gesetzt. <%> ist hierbei der Platzhalter für das Zielelement.

{ "blocks": { "input_submit": { "modify": [{ "selector": "input", "wrapper": "<div><%></div>" }] } } }

Im ersten Beispiel wird im HTML des Blocks input_submit das Element p gesucht und innerhalb das HTML <strong>...</strong> gesetzt. <%> ist hierbei der Platzhalter für den Inhalt des Zielelements.

{ "blocks": { "input_submit": { "modify": [{ "selector": "p", "wrapper": "<strong><%></strong>" }, { "selector": "p", "inner": "<strong>" }] } } }

 

Attribute Entfernen (remove)

check

Man kann Attribute mit der Eigenschaft remove entfernen.

{ "blocks": { "input_submit": { "modify": [{ "selector": "input", "attribute": "src", "remove": true }] } } }
wb_incandescent

Wenn die Eigenschaft remove zusammen mit dem attribute class gesetzt wurde, muss ein Array mit Klassen dazu benutzt werden spezifisch Klassen aus der Klassenliste zu entfernen.

In dem Beispiel werden die Klassen "class1", "class2" und "class3" aus der Klassenliste des Elements entfernt.

{ "blocks": { "input_submit": { "modify": [{ "selector": ".parent", "attribute": "class", "remove": [ "class1", "class2", "class3" ] }] } } }

 

Dynamisch Inhalte einfügen (node + before)

Zusätzlich kann auch die Eigenschaft node verwendet werden, um dynamisch ein HTML Element zu erzeugen und in das bestehende HTML einzufügen. Die Definition des HTML dieses erzeugten Elements kann auch Smarty Code enthalten:

{ "blocks": { "input_submit": { "modify": [{ "selector": ".parent", "node": "<div>{$extra.foobar}</div>" }] } } }

Im genannten Beispiel wird das neue HTML Element als letztes Kindelement des Elternelements eingefügt. Möchten Sie das neue HTML Element stattdessen vor einem bestehenden HTML Element einfügen, so nutzen Sie die Eigenschaft before:

{ "blocks": { "input_submit": { "modify": [{ "selector": ".parent", "node": "<div>{$extra.foobar}</div>", "before": ".sibling" }] } } }

 

Layouts modifizieren

wb_incandescent

Die oben genannten Modifizierungen sind ebenso in Layouts benutzbar.
Man kann auch als Layout all eintragen und so alle Layouts modifizieren.

{ "layouts": { "default": { "modify": [{ "selector": "input", "wrapper": "<div><%></div>" }] } } }
wb_incandescent

Alle genannten modify Möglichkeiten können auch direkt in erster Ebene der conf.json Datei genutzt werden. Dann gelten diese für alle Layouts und alle Blöcke. Beispiel:

{ "modify": [{ "selector": ".container", "wrapper": "<div class=\"foobar\"><%></div>" }] }

 

Seitentypspezifisch modifizieren

wb_incandescent

Da alle gesammelten conf.json Konfigurationen zusammengeführt werden, ist es auch möglich, nur teilweise Eigenschaften zu überschreiben. Das ist dann hilfreich, wenn Sie z.B. für einen Seitentyp nur die Bezeichnung des Blocks ändern oder nur für diesen weitere Einstellungen verwenden möchten.