Skapa komponenter

Senaste uppdatering: 2023-05-20
  • Skapat för:
  • Intermediate
    Developer

AEM används för att lagra, formatera och återge innehåll som är tillgängligt på dina webbsidor.

OBSERVERA

Mer information om hur du skapar AEM finns i Utveckla AEM.

Redigeringskanaler

Kanalen är det centrala objektet för innehåll som levereras till en uppsättning skärmar. Därför öppnar en innehållsförfattare vanligtvis en kanal i redigeraren för att lägga till eller ändra innehåll. Eftersom kanalen är en cq:Page kommer att följa samma traditionella UX-mönster för att lägga till och ändra komponenter i kanalen.

Men eftersom komponenter i en kanal vanligtvis återges i helskärmsläge blir redigeringsupplevelsen lidande när du försöker redigera enskilda komponenter eller skapa nya order. Kanalen använder därför väljare för att återge olika vyer av komponenterna. Redigeringsmiljön använder redigeringsväljaren för att aktivera den anpassade kanalåtergivningen.

Till exempel, http://localhost:4502/editor.html/content/screens/we-retail/channels/idle.edit.html](http://localhost:4502/editor.html/content/screens/we-retail/channels/idle.edit.html

Användaren behöver inte ta hand om att lägga till väljaren till URL-adressen när han/hon redigerar. En logik på klientsidan lyssnar på lagerväxlingshändelsen och lägger till väljaren om en kanal har den dedikerade resurstypen skärmar/kärna/komponenter/kanal.

Återger komponenter

För att möjliggöra en korrekt redigering måste komponenterna tillhandahålla följande två återgivningar:

Komponent Återgivningar
my-component/my-component.html produktionsrendering
my-component/edit.html redigera återgivning i en mindre vy

De inbyggda komponenterna utnyttjar följande klientbibliotekskategorier:

Komponent Klientbibliotek
cq.screens.components.edit CSS och JS som måste läsas in vid redigering
cq.screens.components.production CSS och JS som måste läsas in när kanalen körs
cq.screens.components delad CSS och JS
OBSERVERA

Om du vill utveckla anpassade komponenter använder du AEM Screens exempelkomponentmall.

På denna sida