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.
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>"
}]
}
}
}
Man kann Attribute mit der Eigenschaft remove entfernen.
{
"blocks": {
"input_submit": {
"modify": [{
"selector": "input",
"attribute": "src",
"remove": true
}]
}
}
}
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"
]
}]
}
}
}
{
"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
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>"
}]
}
}
}
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
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.