Wofür wird der automatisch generierte Div-Tag um ein Komponente herum gebraucht?

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+

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?

Adobe MAX 2024

Adobe MAX
Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX

Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX 2024

Adobe MAX
Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX

Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online