Stijlsysteem style-system

Met het Stijlsysteem kan een sjabloonauteur stijlklassen definiëren in het inhoudsbeleid van een component, zodat de auteur van de inhoud deze kan selecteren wanneer hij de component op een pagina bewerkt. Deze stijlen kunnen alternatieve visuele variaties van een component zijn, waardoor de component flexibeler wordt.

Dit elimineert de behoefte om een douanecomponent voor elke stijl te ontwikkelen of het componentendialoogvenster aan te passen om dergelijke stijlfunctionaliteit toe te laten. Het leidt tot herbruikbaardere componenten die snel en gemakkelijk aan de behoeften van inhoudsauteurs zonder enige AEM achterwaartse ontwikkeling kunnen worden aangepast.

Hoofdletters gebruiken use-case

De auteurs van het malplaatje vergen niet alleen de capaciteit om te vormen hoe de componenten voor de inhoudsauteurs functioneren, maar ook om verscheidene alternatieve visuele variaties van een component te vormen.

Op dezelfde manier hebben inhoudsauteurs niet alleen de mogelijkheid nodig om de inhoud te structureren en te rangschikken, maar ook om te selecteren hoe de inhoud visueel wordt weergegeven.

Het systeem van de Stijl verstrekt een verenigde oplossing aan zowel de vereisten van de malplaatjeauteur als van de inhoudauteur:

  • Sjabloonauteurs kunnen stijlklassen definiëren in het inhoudsbeleid van componenten.
  • Inhoudsauteurs kunnen deze klassen vervolgens selecteren in een vervolgkeuzelijst wanneer ze de component op een pagina bewerken om de bijbehorende stijlen toe te passen.

De stijlklasse wordt dan opgenomen op het decoratie omslagelement van de component zodat de componentenontwikkelaar zich niet met de behandeling van de stijlen hoeft bezig te houden voorbij het verstrekken van hun CSS regels.

Overzicht overview

Het gebruik van het Stijlsysteem heeft doorgaans de volgende vorm.

  1. De webontwerper maakt verschillende visuele variaties van een component.

  2. De ontwikkelaar van HTML wordt voorzien van de HTML output van de componenten en de gewenste visuele variaties om uit te voeren.

  3. De ontwikkelaar van HTML bepaalt de CSS klassen die aan elke visuele variatie beantwoorden en op het element moeten worden opgenomen die de componenten verpakt.

  4. De HTML-ontwikkelaar implementeert de bijbehorende CSS-code (en eventueel JS-code) voor elk van de visuele variaties, zodat deze er zo uitzien als gedefinieerd.

  5. De AEM ontwikkelaar plaatst de meegeleverde CSS (en optionele JS) in een Clientbibliotheek en implementeert.

  6. De AEM ontwikkelaar of sjabloonauteur configureert de paginasjablonen en bewerkt het beleid van elke opgemaakte component, voegt de gedefinieerde CSS-klassen toe, geeft gebruikersvriendelijke namen aan elke stijl en geeft aan welke stijlen kunnen worden gecombineerd.

  7. De auteur van de AEM pagina kan vervolgens de ontworpen stijlen in de pagina-editor kiezen via het stijlmenu van de werkbalk van de component.

Merk op dat slechts de laatste drie stappen daadwerkelijk in AEM worden uitgevoerd. Dit betekent dat alle ontwikkeling van de vereiste CSS en JavaScript zonder AEM kan worden uitgevoerd.

Voor een feitelijke implementatie van de stijlen is alleen implementatie op AEM en selectie binnen de componenten van de gewenste sjablonen vereist.

Het volgende diagram illustreert de architectuur van het Systeem van de Stijl.

aem-stijl-systeem

Gebruiken use

Om de functie te demonstreren, gebruiken we WKNDimplementatie van de kerncomponent titelcomponent als voorbeeld.

De volgende secties Als inhoudsauteur en Als sjabloonauteur beschrijf hoe te om de functionaliteit van het Systeem van de Stijl te testen gebruikend het Systeem van de Stijl van WKND.

Ga als volgt te werk als u het Stijlsysteem voor uw eigen componenten wilt gebruiken:

  1. CSS installeren als clientbibliotheken zoals beschreven in de sectie Overzicht.
  2. CSS-klassen configureren die u beschikbaar wilt maken voor de auteurs van de inhoud, zoals wordt beschreven in de sectie Als sjabloonauteur.
  3. Inhoudsauteurs kunnen vervolgens de stijlen gebruiken zoals beschreven in de sectie Als inhoudsauteur.

Als inhoudsauteur as-a-content-author

  1. Na het installeren van het WKND-project navigeert u naar de hoofdpagina voor de Engelse taal van WKND op http://<host>:<port>/sites.html/content/wknd/language-masters/en en bewerkt u de pagina.

  2. Selecteer een Titel component verder omlaag op de pagina

    Stijlsysteem voor de auteur

  3. Klik op de knop Stijlen op de werkbalk van de Lijst om het stijlmenu te openen en de weergave van de component te wijzigen.

    Stijlen selecteren

    note note
    NOTE
    In dit voorbeeld wordt Kleuren stijlen (Zwart, Wit, en Grijs) elkaar uitsluiten, terwijl de Stijl opties (Onderstrepen, Rechts uitlijnen, en Mini-spatiëring) kan worden gecombineerd. Dit kan in de sjabloon worden geconfigureerd als sjabloonauteur.

Als sjabloonauteur as-a-template-author

  1. Tijdens het bewerken van de hoofdpagina voor de Engelse taal van WKND op http://<host>:<port>/sites.html/content/wknd/language-masters/en, bewerkt u de sjabloon van de pagina via Paginagegevens > Sjabloon bewerken.

    Sjabloon bewerken

  2. Het beleid van de Titel component door te tikken of op de component te klikken Beleid van de component.

    Beleid bewerken

  3. Op het tabblad Stijlen van de eigenschappen kunt u zien hoe de stijlen zijn geconfigureerd.

    Eigenschappen bewerken

    • Groepsnaam: Stijlen kunnen worden gegroepeerd in het stijlmenu dat de auteur van de inhoud ziet wanneer het vormen van de stijl van de component.
    • Stijlen kunnen worden gecombineerd: Hiermee kunt u meerdere stijlen in die groep tegelijk selecteren.
    • Stijlnaam: De beschrijving van de stijl die aan de inhoudsauteur wanneer het vormen van de stijl van de component zal tonen.
    • CSS-klassen: De werkelijke naam van de CSS-klasse die aan de stijl is gekoppeld.

    Gebruik de sleephandgrepen om de volgorde van de groepen en de stijlen in de groepen te bepalen. Met de pictogrammen Toevoegen of Verwijderen kunt u groepen of stijlen in de groepen toevoegen of verwijderen.

CAUTION
De CSS-klassen (en eventueel noodzakelijke JavaScript) die zijn geconfigureerd als stijleigenschappen van het beleid van een component, moeten worden geïmplementeerd als Clientbibliotheken om te werken.

Instellen setup

Versie 2 en later van de Componenten van de kern wordt volledig toegelaten om uit het Systeem van de Stijl voordeel te halen en geen extra configuratie te vereisen.

De volgende stappen zijn alleen nodig om het Stijlsysteem in te schakelen voor uw eigen aangepaste componenten of om Schakel het tabblad Optionele stijlen in het dialoogvenster Bewerken in.

Het tabblad Stijl in het dialoogvenster Ontwerpen inschakelen enable-styles-tab-design

Een component werkt alleen met AEM Stijlsysteem en geeft het stijltabblad weer in het ontwerpdialoogvenster als de ontwikkelaar van de component het tabblad Stijl met de volgende instellingen voor de component bevat:

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"

Met de gevormde component, zullen de stijlen die door de paginaauteurs worden gevormd automatisch door AEM op het decoratie element worden opgenomen dat AEM automatisch rond elke editable component verpakt. De component zelf hoeft niets anders te doen om dit te bewerkstelligen.

Het tabblad Stijlen inschakelen in het dialoogvenster Bewerken enable-styles-tab-edit

Vanaf AEM versie 6.5.3.0 is het tabblad Optionele stijlen in het dialoogvenster Bewerken nu beschikbaar. In tegenstelling tot het tabblad Ontwerpdialoogvenster is het tabblad in het dialoogvenster Bewerken niet essentieel voor het functioneren van het Stijlsysteem, maar is het een optionele alternatieve interface voor de auteur van inhoud om stijlen in te stellen.

Het tabblad Bewerken kan op vergelijkbare wijze worden opgenomen als het tabblad van het dialoogvenster Ontwerpen:

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"
NOTE
Het tabblad Stijlen in het dialoogvenster Bewerken is niet standaard ingeschakeld.

Stijlen met elementnamen styles-with-element-names

Een ontwikkelaar kan ook een lijst met toegestane elementnamen voor stijlen op de component configureren met de cq:styleElements array-eigenschap string. Vervolgens kan de sjabloonauteur op het tabblad Stijlen van het beleid in het ontwerpdialoogvenster ook een elementnaam kiezen die voor elke stijl moet worden ingesteld. Hiermee wordt de elementnaam van het omvattende element ingesteld.

Deze eigenschap is ingesteld op het tabblad cq:Component knooppunt. Bijvoorbeeld:

  • /apps/<yoursite>/components/content/list@cq:styleElements=[div,section,span]
CAUTION
Definieer geen elementnamen voor stijlen die kunnen worden gecombineerd. Wanneer de veelvoudige elementnamen worden bepaald, is de orde van prioriteit:
  1. HTML heeft voorrang op alles: data-sly-resource="${'path/to/resource' @ decorationTagName='span'}
  2. Dan onder veelvoudige actieve stijlen, wordt de eerste stijl in de lijst van stijlen die in het beleid van de component worden gevormd genomen.
  3. Tot slot de componenten cq:htmlTag/ cq:tagName wordt beschouwd als een terugvalwaarde.

Deze mogelijkheid om stijlnamen te definiëren, is handig voor zeer algemene componenten, zoals de container van de layout of de component Content Fragment, zodat ze een extra betekenis krijgen.

Zo kan een container voor lay-out bijvoorbeeld semantiek krijgen <main>, <aside>, <nav>, enzovoort.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2