När en komponent på en webbsida återges kan ett HTML-element genereras och den återgivna komponenten kapslas in i sig själv. Detta har främst två syften:
För utvecklare har AEM en tydlig och enkel logik som styr de dekorationstaggar som omsluter de inkluderade komponenterna. Om och hur dekorationstaggen återges definieras av en kombination av två faktorer som den här sidan kommer att dyka upp i:
Här följer några allmänna rekommendationer för när wrapper-elementet ska tas med, som hjälper dig att undvika att stöta på oväntade problem:
Följande egenskaper och noder kan tillämpas på komponenterna för att styra beteendet för deras dekorationstagg:
cq:noDecoration {boolean}
: Den här egenskapen kan läggas till i en komponent och ett true-värde AEM inte generera några wrapper-element över komponenten.cq:htmlTag
node : Den här noden kan läggas till under en komponent och kan ha följande egenskaper:
cq:tagName {String}
: Detta kan användas för att ange en anpassad HTML-tagg som ska användas för att kapsla in komponenterna i stället för DIV-standardelementet.class {String}
: Detta kan användas för att ange CSS-klassnamn som ska läggas till i wrapper.I allmänhet kan omslutningsbeteendet i HTML sammanfattas på följande sätt:
data-sly-resource="foo"
).Omslagets beteende kan också styras helt.
cq:noDecoration
och cq:tagName
) kan också definiera wrapper-taggen.Det går att helt styra beteendet för wrapper-taggarna från HTML-skript och tillhörande logik.
Mer information om hur du utvecklar i HTML finns i HTL-dokumentation.
Detta beslutsträd sammanfattar logiken som bestämmer beteendet för wrapper-taggarna.
Följande tre exempel innehåller exempel på hur wrapper-taggarna hanteras, och visar också hur enkelt det är att styra det önskade beteendet för wrapper-taggarna.
Alla exempel som följer förutsätter följande innehållsstruktur och komponenter:
/content/test/
@resourceType = "test/components/one"
child/
@resourceType = "test/components/two"
/apps/test/components/
one/
one.html
two/
two.html
cq:htmlTag/
@cq:tagName = "article"
@class = "component-two"
Det vanligaste användningsfallet är när en komponent innehåller en annan komponent av kodskäl. I så fall är den inkluderade komponenten inte nödvändig för att kunna redigeras med ett eget verktygsfält och en egen dialogruta. Därför behövs ingen wrapper, och komponentens cq:htmlTag
ignoreras. Detta kan betraktas som standardbeteendet.
one.html: <sly data-sly-resource="child"></sly>
two.html: Hello World!
Resultat av utdata på /content/test.html
:
Hello World!
Ett exempel är en komponent som innehåller en huvudbildkomponent för att visa en bild, vanligtvis med hjälp av en syntetisk resurs, som består i att ta med en virtuell underordnad komponent genom att skicka ett Map-objekt som representerar alla egenskaper som komponenten skulle ha till en dataunderordnad resurs.
Ett annat vanligt användningsfall är när behållarkomponenter innehåller redigerbara underordnade komponenter, som en layoutbehållare. I det här fallet behöver varje inkluderat underordnat objekt en wrapper för att redigeraren ska fungera (såvida de inte uttryckligen inaktiveras med cq:noDecoration
egenskap).
Eftersom den inkluderade komponenten i det här fallet är en fristående komponent, behöver den ett wrapper-element för att redigeraren ska kunna arbeta och för att definiera dess layout och format som ska användas. För att aktivera det här beteendet finns decoration=true
alternativ.
one.html: <sly data-sly-resource="${'child' @ decoration=true}"></sly>
two.html: Hello World!
Resultat av utdata på /content/test.html
:
<article class="component-two">Hello World!</article>
Det kan finnas ett obegränsat antal komplexa fall, som enkelt kan uppnås genom möjligheten att HTML uttryckligen anger:
decorationTagName='ELEMENT_NAME'
För att definiera elementnamnet för wrapper.cssClassName='CLASS_NAME'
För att definiera CSS-klassnamn som ska anges för den.one.html: <sly data-sly-resource="${'child' @ decorationTagName='aside', cssClassName='child'}"></sly>
two.html: Hello World!
Resultat /content/test.html
:
<aside class="child">Hello World!</aside>