Documentatie AEM Tutorials voor AEM AEM Sites WKND-tutorials

Ontwikkelen met het Stijlsysteem developing-with-the-style-system

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:
Kernonderdelen

Gemaakt voor:

Beginner
Ontwikkelaar

Leer hoe te om individuele stijlen uit te voeren en de Componenten van de Kern te hergebruiken gebruikend het Systeem van de Stijl van de Experience Manager. Deze zelfstudie behandelt het ontwikkelen voor het Systeem van de Stijl om de Componenten van de Kern met merkspecifieke CSS en geavanceerde beleidsconfiguraties van de Redacteur van het Malplaatje uit te breiden.

Vereisten prerequisites

Herzie het vereiste tooling en de instructies voor vestiging a lokale ontwikkelomgeving.

Het wordt ook geadviseerd om de cliënt-zijBibliotheken en het 1} leerprogramma van het Voorste-Eind van het Werkschema te herzien {om de grondbeginselen van cliënt-zijbibliotheken en de diverse front-end hulpmiddelen te begrijpen die in het AEM project worden gebouwd.

Starter-project

NOTE

Als u met succes het vorige hoofdstuk voltooide, kunt u het project opnieuw gebruiken en de stappen overslaan voor het uitchecken van het starterproject.

Bekijk de basislijncode waarop de zelfstudie is gebaseerd:

Controle uit de tutorial/style-system-start tak van GitHub

code language-shell
`$ cd aem-guides-wknd $ git checkout tutorial/style-system-start`

Stel codebasis aan een lokale AEM instantie op gebruikend uw Maven vaardigheden:

code language-shell
`$ mvn clean install -PautoInstallSinglePackage`

note note
NOTE
Als u AEM 6.5 of 6.4 gebruikt, voegt u het `classic` -profiel toe aan Maven-opdrachten.

code language-shell
`$ mvn clean install -PautoInstallSinglePackage -Pclassic`

U kunt de gebeëindigde code op GitHubaltijd bekijken of de code plaatselijk controleren door aan de tak tutorial/style-system-solution te schakelen.

Doelstelling

Begrijp hoe te om het Systeem van de Stijl te gebruiken om merkspecifieke CSS op AEM Componenten van de Kern toe te passen.
Leer meer over BEM-notatie en hoe u deze kunt gebruiken om stijlen zorgvuldig in bereik te brengen.
Geavanceerde beleidsconfiguraties toepassen met bewerkbare sjablonen.

Wat u gaat bouwen what-build

Dit hoofdstuk gebruikt de eigenschap van het Systeem van de Stijlom variaties van de Titel tot stand te brengen en Tekst componenten die op de pagina van het Artikel worden gebruikt.

Stijlen beschikbaar voor Titel

onderstreepte stijl beschikbaar aan gebruik voor de Component van de Titel

Achtergrond background

Het Systeem van de Stijlstaat ontwikkelaars en malplaatjeredacteurs toe om veelvoudige visuele variaties van een component tot stand te brengen. Auteurs kunnen vervolgens bepalen welke stijl moet worden gebruikt bij het samenstellen van een pagina. Het Stijlsysteem wordt gebruikt door de rest van de zelfstudie om verscheidene unieke stijlen te bereiken terwijl het gebruiken van de Componenten van de Kern in een lage codebenadering.

Het algemene idee met het Stijlsysteem is dat ontwerpers verschillende stijlen kunnen kiezen van hoe een component eruit moet zien. De "stijlen" worden ondersteund door extra CSS-klassen die in de buitenste div van een component worden geïnjecteerd. In de clientbibliotheken worden CSS-regels toegevoegd op basis van deze stijlklassen, zodat de vormgeving van de component verandert.

U kunt gedetailleerde documentatie voor het Systeem van de Stijl hiervinden. Er is ook een grote technische video voor het begrip van het Systeem van de Stijl.

Onderstrepingsstijl - Titel underline-style

De Component van de Titelis proxied in het project onder /apps/wknd/components/title als deel van de ui.apps module. De standaardstijlen van de elementen van de Kop (H1, H2, H3…) zijn reeds uitgevoerd in ui.frontend module.

De ontwerpen van het Artikel van WKNDbevatten een unieke stijl voor de component van de Titel met onderstrepen. In plaats van twee componenten te maken of het dialoogvenster van de component te wijzigen, kunt u het Stijlsysteem gebruiken om auteurs de optie toe te staan een onderstrepingsstijl toe te voegen.

onderstreepte Stijl - de Component van de Titel

Titelbeleid toevoegen

Voeg een beleid voor de componenten van de Titel toe om inhoudsauteurs toe te staan om de onderstreepte stijl te kiezen om op specifieke componenten toe te passen. Dit wordt gedaan gebruikend de Redacteur van het Malplaatje binnen AEM.

Navigeer aan het malplaatje van de Pagina van het Artikel van: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html
In wijze van de Structuur 0}, op de belangrijkste Container van de Lay-out , selecteer het pictogram van het Beleid naast de Titel component die onder wordt vermeld Toegelaten Componenten:

Maak een beleid voor de component Title met de volgende waarden:

Titel van het Beleid*: Titel WKND

Eigenschappen > het Lusje van Stijlen > voegt een nieuwe stijl toe

onderstreping : cmp-title--underline

het beleidsconfiguratie van de Stijl voor titel

Klik Gedaan om de veranderingen in het beleid van de Titel te bewaren.

note note
NOTE
Met de waarde `cmp-title--underline` wordt de CSS-klasse gevuld op de buitenste div van de markering HTML van de component.

De stijl Onderstrepen toepassen

Laten we als auteur de onderstrepingsstijl toepassen op bepaalde titelcomponenten.

Navigeer aan La Skateparks artikel in de redacteur van AEM Sites bij: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html

Op geef wijze uit, kies een component van de Titel. Klik het pictogram van het schildpenseel en selecteer onderstrepen stijl:

pas de onderstreepte Stijl toe

note note
NOTE
Op dit punt vindt geen zichtbare wijziging plaats omdat de `underline` -stijl niet is geïmplementeerd. In de volgende oefening, wordt deze stijl uitgevoerd.

Klik het pictogram van de Informatie van de Pagina > Mening zoals Gepubliceerd om de pagina buiten AEM redacteur te inspecteren.

Gebruik de browsergereedschappen om te controleren of de CSS-klasse cmp-title--underline is toegepast op de buitenste div van de markering rondom de component Title.

Div met onderstreepte toegepaste klasse

code language-html

code language-html
`<div class="title cmp-title--underline"> <div data-cmp-data-layer="{"title-b6450e9cab":{"@type":"wknd/components/title","repo:modifyDate":"2022-02-23T17:34:42Z","dc:title":"Vans Off the Wall Skatepark"}}" id="title-b6450e9cab" class="cmp-title"> <h2 class="cmp-title__text">Vans Off the Wall Skatepark</h2> </div> </div>`

<div class="title cmp-title--underline">
    <div data-cmp-data-layer="{&quot;title-b6450e9cab&quot;:{&quot;@type&quot;:&quot;wknd/components/title&quot;,&quot;repo:modifyDate&quot;:&quot;2022-02-23T17:34:42Z&quot;,&quot;dc:title&quot;:&quot;Vans Off the Wall Skatepark&quot;}}"
    id="title-b6450e9cab" class="cmp-title">
        <h2 class="cmp-title__text">Vans Off the Wall Skatepark</h2>
    </div>
</div>

Implementeer de onderstrepingsstijl - ui.frontend

Daarna, voer de onderstreepte stijl uit gebruikend de {module 0} ui.frontend van het AEM project. De webpack ontwikkelingsserver die met de {module 0} ui.frontend {wordt gebundeld om de stijlen voor het opstellen aan een lokale instantie van AEM voor te vertonen wordt gebruikt.

Begin het watch proces van binnen de ui.frontend module:

code language-shell
`$ cd ~/code/aem-guides-wknd/ui.frontend/ $ npm run watch`

Dit begint een proces dat veranderingen in de module ui.frontend controleert en de veranderingen in de AEM instantie synchroniseert.

Retourneer uw IDE en open het bestand _title.scss van: ui.frontend/src/main/webpack/components/_title.scss .

Introduceer een nieuwe regel voor de cmp-title--underline -klasse:

code language-scss

code language-scss
`/* Default Title Styles / .cmp-title {} .cmp-title__text {} .cmp-title__link {} / Add Title Underline Style */ .cmp-title--underline { .cmp-title__text { &:after { display: block; width: 84px; padding-top: 8px; content: ''; border-bottom: 2px solid $brand-primary; } } }`

/* Default Title Styles */
.cmp-title {}
.cmp-title__text {}
.cmp-title__link {}

/* Add Title Underline Style */
.cmp-title--underline {
    .cmp-title__text {
        &:after {
        display: block;
            width: 84px;
            padding-top: 8px;
            content: '';
            border-bottom: 2px solid $brand-primary;
        }
    }
}

note note
NOTE
Het wordt beschouwd als beste praktijken om werkingsgebiedstijlen aan de doelcomponent altijd strak te maken. Dit zorgt ervoor dat extra stijlen andere gebieden van de pagina niet beïnvloeden.
Alle Componenten van de Kern houden zich aan BEM aantekening aan. Het wordt aanbevolen de buitenste CSS-klasse als doel in te stellen wanneer u een standaardstijl voor een component maakt. Een andere beste manier is om klassennamen te richten die door de aantekening van de Component van de Kern worden gespecificeerd BEM eerder dan HTML elementen.

Ga terug naar de browser en de AEM pagina. De stijl Onderstrepen wordt toegevoegd:
In de Redacteur van de AEM, zou u nu in en van moeten kunnen van de Onderstreping stijl van een knevel voorzien en zien dat de veranderingen visueel weerspiegeld.

Stijl prijsblok - Tekst text-component

Daarna, herhaal gelijkaardige stappen om een unieke stijl op de Component van de Teksttoe te passen. De component van de Tekst is proxied in het project onder /apps/wknd/components/text als deel van de {module 1} ui.apps. De standaardstijlen van paragraafelementen zijn reeds uitgevoerd in ui.frontend.

De ontwerpen van het Artikel van WKNDbevatten een unieke stijl voor de component van de Tekst met een citaatblok:

Stijl van het Blok van het Citaat - de Component van de Tekst

Tekstbeleid toevoegen

Voeg vervolgens een beleid toe voor de tekstcomponenten.

Navigeer aan het Malplaatje van de Pagina van het Artikel van: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.
In wijze van de Structuur 0}, op de belangrijkste Container van de Lay-out , selecteer het pictogram van het Beleid naast de component die van de Tekst onder wordt vermeld Toegelaten Componenten:
Werk het componentenbeleid van de Tekst met de volgende waarden bij:

Titel van het Beleid*: Tekst van de Inhoud

Insteekmodules > Stijlen van de Paragraaf > laat paragraafstijlen toe

het Lusje van Stijlen > voegt een nieuwe stijl toe

Blok van het Citaat : cmp-text--quote

Klik Gedaan om de veranderingen in het beleid van de Tekst te bewaren.

De stijl voor het aanhalingsteken toepassen

Navigeer aan La Skateparks artikel in de redacteur van AEM Sites bij: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
Op geef wijze uit, kies een component van de Tekst. Bewerk de component om een aanhalingsteken te plaatsen:

{de Configuratie van de Component van 0} Tekst
Selecteer de tekstcomponent en klik het pictogram van het schilderpenseel en selecteer de stijl van het Blok van het Citaat:

Gebruik de ontwikkelaarsgereedschappen van de browser om de markering te inspecteren. U ziet dat de klassenaam cmp-text--quote is toegevoegd aan de buitenste div van de component:

code language-html

code language-html
<!-- Quote Block style class added --> <div class="text cmp-text--quote"> <div data-cmp-data-layer="{"text-60910f4b8d":{"@type":"wknd/components/text","repo:modifyDate":"2022-02-24T00:55:26Z","xdm:text":"<blockquote>&nbsp; &nbsp; &nbsp;&quot;There is no better place to shred then Los Angeles&quot;</blockquote>\r\n<p>- Jacob Wester, Pro Skater</p>\r\n"}}" id="text-60910f4b8d" class="cmp-text"> <blockquote>     "There is no better place to shred then Los Angeles"</blockquote> <p>- Jacob Wester, Pro Skater</p> </div> </div>

<!-- Quote Block style class added -->
<div class="text cmp-text--quote">
    <div data-cmp-data-layer="{&quot;text-60910f4b8d&quot;:{&quot;@type&quot;:&quot;wknd/components/text&quot;,&quot;repo:modifyDate&quot;:&quot;2022-02-24T00:55:26Z&quot;,&quot;xdm:text&quot;:&quot;<blockquote>&amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;quot;There is no better place to shred then Los Angeles&amp;quot;</blockquote>\r\n<p>- Jacob Wester, Pro Skater</p>\r\n&quot;}}" id="text-60910f4b8d" class="cmp-text">
        <blockquote>&nbsp; &nbsp; &nbsp;"There is no better place to shred then Los Angeles"</blockquote>
        <p>- Jacob Wester, Pro Skater</p>
    </div>
</div>

Implementeer de stijl voor het aanhalingsteken - ui.frontend

Volgende implementeren de stijl van het Blok van het Citaat met behulp van de module 0} ui.frontend van het AEM project.

Als niet reeds lopend, begin het watch proces van binnen de ui.frontend module:

code language-shell
`$ npm run watch`

Werk het bestand text.scss bij vanaf: ui.frontend/src/main/webpack/components/_text.scss

code language-css

code language-css
/* Default text style / .cmp-text {} .cmp-text__paragraph {} / WKND Text Quote style / .cmp-text--quote { .cmp-text { background-color: $brand-third; margin: 1em 0em; padding: 1em; blockquote { border: none; font-size: $font-size-large; font-family: $font-family-serif; padding: 14px 14px; margin: 0; margin-bottom: 0.5em; &:after { border-bottom: 2px solid $brand-primary; /yellow border */ content: ''; display: block; position: relative; top: 0.25em; width: 80px; } } p { font-family: $font-family-serif; } } }

/* Default text style */
.cmp-text {}
.cmp-text__paragraph {}

/* WKND Text Quote style */
.cmp-text--quote {
    .cmp-text {
        background-color: $brand-third;
        margin: 1em 0em;
        padding: 1em;

        blockquote {
            border: none;
            font-size: $font-size-large;
            font-family: $font-family-serif;
            padding: 14px 14px;
            margin: 0;
            margin-bottom: 0.5em;

            &:after {
                border-bottom: 2px solid $brand-primary; /*yellow border */
                content: '';
                display: block;
                position: relative;
                top: 0.25em;
                width: 80px;
            }
        }
        p {
            font-family:  $font-family-serif;
        }
    }
}

note caution
CAUTION
In dit geval worden onbewerkte HTML-elementen bepaald door de stijlen. De reden hiervoor is dat de component Text een Rich Text Editor biedt voor auteurs van inhoud. Het rechtstreeks maken van stijlen tegen RTE-inhoud moet met de nodige voorzichtigheid gebeuren en het is nog belangrijker om de stijlen strak uit te breiden.

Keer opnieuw aan browser en u zou moeten zien dat de het blokstijl van het Citaat wordt toegevoegd:
Stop de webpack-ontwikkelingsserver.

Vaste breedte - Container (Bonus) layout-container

Containercomponenten zijn gebruikt om de basisstructuur van het artikelpaginasjabloon te maken en om de neerzetzones te bieden waar inhoudsauteurs inhoud aan een pagina kunnen toevoegen. Containers kunnen ook het Stijlsysteem gebruiken, waardoor de auteurs van inhoud nog meer opties voor het ontwerpen van lay-outs krijgen.

De HoofdContainer van het malplaatje van de Pagina van het Artikel bevat de twee auteur-able containers en heeft een vaste breedte.

Belangrijkste Container

Belangrijkste Container in het Malplaatje van de Pagina van het Artikel.

Het beleid van de Belangrijkste Container plaatst het standaardelement als main:

HoofdBeleid van de Container

CSS die tot de HoofdContainer vast maakt wordt geplaatst in ui.frontend module bij ui.frontend/src/main/webpack/site/styles/container_main.scss:

main.container {
    padding: .5em 1em;
    max-width: $max-content-width;
    float: unset!important;
    margin: 0 auto!important;
    clear: both!important;
}

In plaats van het richten van het main element van de HTML, zou het Systeem van de Stijl kunnen worden gebruikt om a Vaste breedte stijl als deel van het beleid van de Container tot stand te brengen. Het Systeem van de Stijl kon gebruikers de optie geven om tussen Vaste breedte en Dynamische breedte containers van een knevel te voorzien.

Uitdaging van de Bonen - gebruiks lessen die van de vorige oefeningen worden geleerd en gebruik het Systeem van de Stijl om a Vaste breedte en Fluid breedte stijlen voor de component van de Container uit te voeren.

Gefeliciteerd! congratulations

Gefeliciteerd, de artikelpagina is bijna opgemaakt en u hebt praktijkervaring opgedaan met het systeem AEM stijl.

Volgende stappen next-steps

Leer de stappen van begin tot eind om a douanecomponent AEMtot stand te brengen die inhoud authored in een Dialoog toont, en verkent het ontwikkelen van een het Verkopen Model om bedrijfslogica in te kapselen die HTML van de component bevolkt.

Bekijk de gebeëindigde code op GitHubof herzie en stel plaatselijk de code bij de tak van het Git tutorial/style-system-solution op.

Kloon de github.com/adobe/aem-wknd-guidesbewaarplaats.
Bekijk de tutorial/style-system-solution -vertakking.

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9