Frage
Wenn eine Komponente zum Beispiel mit einem <cq:include>-Tag eingeschlossen ist, wird der Div-Tag automatisch in der generierten HTML in die Komponente eingefügt.
Wofür wird dieser Div-Tag verwendet und ist es möglich, seine automatische Erstellung zu unterdrücken?
Antwort, Auflösung
Dieser Div-Tag wird für das Bearbeitungssystem von CQ5 (Zeichnen, Bearbeiten, Rollover-Rahmen usw.), das Designersystem CQ5 (CSS-Klassenname, Designer-CSS) und auch zum Bestimmen der Komponente im Client DOM verwendet.
Es ist möglich, diesen generierten Div-Tag zu unterdrücken, indem Sie einen leeren Tag cq:cellName in der Komponentendefinition eingeben (sehen Sie wie integrierte Entwurfs-Zellen-IDs gebaut werden) oder durch Verwendung des IncludeOptions.forceSameContext(true).
Verweis auf: In beiden Fällen können Sie die Komponente nicht mehr bearbeiten (d.h. keine Dialoge).
Der generierte Div-Tag enthält immer mindestens ein CSS-Klassennamenattribut, das aus dem Zellennamen der Komponente (siehe Wie werden Design-Zellen-IDs erstellt) für das CSS-Styling der Komponente erstellt wird.
Dieses CSS-Klassennamenattribut kann nicht unterdrückt werden.
Es ist möglich, zusätzliche Attribute für diesen generierten Div-Tag durch den Netzknoten cq:htmlTag in der Komponentendefinition hinzuzufügen.
Jede Eigenschaft dieses Knotens wird als Tag-Attribut hinzugefügt.
Es ist auch möglich, das CSS-Klassennamenattribut des Div-Tags durch Hinzufügen der Eigenschaft class im Knoten cq: htmlTag zu „überschreiben“.
In diesem Fall wird der Zellenname nicht mehr automatisch hinzugefügt. Die CSS-relevanten Designeigenschaften aus dem Designdialog (zur generierten Designer-CSS-Datei hinzugefügt) haben daher keine Auswirkung mehr -> der Zellenname muss der Eigenschaft class im Knoten cq: htmlTag manuell hinzugefügt werden.
Die automatisch generierte CSS-Designerdatei (/etc/designs/<designname>.css) enthält die CSS-relevanten Designeigenschaften aus dem Designdialog mit dem CSS-Klassennamen, der der Komponenten-Div entspricht. Sie müssen sicherstellen, dass die CSS-Klassennamen aus Ihrer statischen CSS-Datei (/etc/designs/<designname>/static.css) nicht mit diesen Namen in Konflikt stehen!
CQ5.3 und neuer.
Beginnend mit CQ5.3 wurde eine neue und dediziertere API implementiert, die eine bessere Kontrolle von (automatisch erstellten) Dekorations-Tags ermöglicht:
- Option zur Specifizierung des Tag-Namens für eine Komponente (cq:htmlTag/cq:tagName property).
- Eingeschlossene Option zur Steuerung Tags: IncludeOptions#setDecorationTagName
- Option zum Steuern des Standard-Tag-Namens: ComponentContext#setDefaultDecorationTagName
Alle oben genannten Optionen ermöglichen es, das Dekoration-Tag zu unterdrücken, wenn er auf einen leeren String gesetzt ist.
Gilt für
CQ5.2
CQ5.3+
Bei Ihrem Konto anmelden