Documentazione AEM Tutorial su AEM Tutorial WKND di AEM Sites

Sviluppo con il sistema di stili developing-with-the-style-system

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Argomenti:
Core Components

Creato per:

Principiante
Sviluppatore

Scopri come implementare singoli stili e riutilizzare i Componenti core utilizzando il Sistema di stili di Experience Manager. Questa esercitazione tratta lo sviluppo per il sistema di stili per estendere i componenti core con CSS specifici per il brand e configurazioni di policy avanzate dell’Editor modelli.

Prerequisiti prerequisites

Esaminare gli strumenti e le istruzioni necessari per configurare un ambiente di sviluppo locale.

È inoltre consigliabile rivedere l'esercitazione Librerie lato client e flusso di lavoro front-end per comprendere le nozioni di base delle librerie lato client e dei vari strumenti front-end incorporati nel progetto AEM.

Progetto iniziale

NOTE

Se hai completato correttamente il capitolo precedente, puoi riutilizzare il progetto e saltare i passaggi per estrarre il progetto iniziale.

Consulta il codice della riga di base su cui si basa l’esercitazione:

Controlla il ramo tutorial/style-system-start da GitHub

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

Implementa la base di codice in un’istanza AEM locale utilizzando le tue competenze Maven:

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

note note
NOTE
Se utilizzi AEM 6.5 o 6.4, aggiungi il profilo `classic` a qualsiasi comando Maven.

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

Puoi sempre visualizzare il codice finito su GitHub o estrarre il codice localmente passando al ramo tutorial/style-system-solution.

Obiettivo

Scopri come utilizzare il sistema di stili per applicare CSS specifici per il brand ai componenti core AEM.
Scopri la notazione BEM e come utilizzarla per definire con attenzione gli stili.
Applicare configurazioni di criteri avanzate con modelli modificabili.

Cosa intendi creare what-build

In questo capitolo viene utilizzata la funzionalità Sistema di stili per creare varianti dei componenti Titolo e Testo utilizzati nella pagina dell'articolo.

Stili disponibili per il titolo

Stile sottolineato disponibile per il componente Titolo

Informazioni di base background

Il sistema di stili consente agli sviluppatori e agli editor di modelli di creare più varianti visive di un componente. Gli autori possono quindi decidere quale stile utilizzare durante la composizione di una pagina. Il sistema di stili viene utilizzato in tutto il resto dell’esercitazione per ottenere diversi stili univoci utilizzando i Componenti core in un approccio a basso codice.

L’idea generale del sistema di stili è che gli autori possano scegliere vari stili per definire l’aspetto di un componente. Gli "stili" sono supportati da classi CSS aggiuntive che vengono inserite nell’elemento div esterno di un componente. Nelle librerie client vengono aggiunte regole CSS basate su queste classi di stile in modo che il componente cambi aspetto.

Puoi trovare la documentazione dettagliata per il sistema di stili qui. C'è anche un ottimo video tecnico per comprendere il sistema di stili.

Stile sottolineatura - Titolo underline-style

Il componente Titolo è stato aggiunto al progetto in /apps/wknd/components/title come parte del modulo ui.apps. Gli stili predefiniti degli elementi Titolo (H1, H2, H3…) sono già stati implementati nel modulo ui.frontend.

Le progettazioni dell'articolo WKND contengono uno stile univoco per il componente Titolo con una sottolineatura. Invece di creare due componenti o modificare la finestra di dialogo del componente, è possibile utilizzare il sistema di stili per consentire agli autori di aggiungere uno stile sottolineato.

Stile sottolineato - Componente titolo

Aggiungi un criterio titolo

Aggiungiamo un criterio per i componenti Titolo per consentire agli autori di contenuto di scegliere lo stile Sottolineato da applicare a componenti specifici. Questa operazione viene eseguita utilizzando l’Editor di modelli in AEM.

Passa al modello Pagina articolo da: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html
In modalità Struttura, nel Contenitore layout principale, selezionare l'icona Criteri accanto al componente Titolo elencato in Componenti consentiti:

Crea un criterio per il componente Titolo con i seguenti valori:

Titolo criterio*: Titolo WKND

Proprietà > Scheda Stili > Aggiungi un nuovo stile

Sottolineato: cmp-title--underline

Configurazione dei criteri di stile per il titolo

Fai clic su Fine per salvare le modifiche ai criteri del titolo.

note note
NOTE
Il valore `cmp-title--underline` popola la classe CSS sull'elemento div esterno del markup HTML del componente.

Applicare lo stile Sottolineato

In qualità di autore, applichiamo lo stile sottolineato a determinati componenti titolo.

Passa all'articolo La Skateparks nell'editor di AEM Sites all'indirizzo: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html

In modalità Modifica, scegli un componente Titolo. Fai clic sull'icona pennello e seleziona lo stile Sottolineato:

Applica stile sottolineatura

note note
NOTE
A questo punto, non si verifica alcuna modifica visibile poiché lo stile `underline` non è stato implementato. Nell’esercizio successivo, questo stile viene implementato.

Fai clic sull'icona Informazioni pagina > Visualizza come pubblicato per controllare la pagina all'esterno dell'editor AEM.

Utilizzare gli strumenti di sviluppo del browser per verificare che al markup del componente Titolo sia applicata la classe CSS cmp-title--underline al div esterno.

Div con classe sottolineata applicata

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>

Implementare lo stile Sottolineato - ui.frontend

Quindi, implementa lo stile Sottolineato utilizzando il modulo ui.frontend del progetto AEM. Viene utilizzato il server di sviluppo Webpack fornito con il modulo ui.frontend per visualizzare in anteprima gli stili prima della distribuzione in un'istanza locale dell'AEM.

Avvia il processo watch dal modulo ui.frontend:

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

Verrà avviato un processo che monitora le modifiche nel modulo ui.frontend e sincronizza le modifiche con l'istanza AEM.

Restituire l'IDE e aprire il file _title.scss da: ui.frontend/src/main/webpack/components/_title.scss.

Introdurre una nuova regola destinata alla classe cmp-title--underline:

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
È consigliabile definire sempre con precisione l’ambito degli stili del componente di destinazione. In questo modo gli stili aggiuntivi non influiranno su altre aree della pagina.
Tutti i Componenti core sono conformi alla notazione BEM. È consigliabile eseguire il targeting della classe CSS esterna durante la creazione di uno stile predefinito per un componente. Un’altra best practice è quella di eseguire il targeting dei nomi di classe specificati dalla notazione BEM del componente core, anziché degli elementi HTML.

Torna al browser e alla pagina AEM. Dovresti notare che è stato aggiunto lo stile Sottolineato:
Nell'editor AEM, ora dovresti essere in grado di attivare e disattivare lo stile Sottolineato e vedere che le modifiche si riflettono visivamente.

Stile blocco preventivo - Testo text-component

Ripetere quindi i passaggi simili per applicare uno stile univoco al componente testo. Il componente Testo è stato aggiunto come proxy al progetto in /apps/wknd/components/text come parte del modulo ui.apps. Gli stili predefiniti degli elementi paragrafo sono già stati implementati in ui.frontend.

Le progettazioni dell'articolo WKND contengono uno stile univoco per il componente Testo con un blocco di virgolette:

Stile blocco preventivo - Componente testo

Aggiungi un criterio di testo

Quindi aggiungi un criterio per i componenti Testo.

Passa al modello pagina articolo da: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.
In modalità Struttura, nel Contenitore layout principale, selezionare l'icona Criteri accanto al componente Testo elencato in Componenti consentiti:
Aggiorna il criterio del componente Testo con i seguenti valori:

Titolo criterio*: Testo contenuto

Plug-in > Stili paragrafo > Abilita stili paragrafo

Scheda Stili > Aggiungi un nuovo stile

Blocco preventivo: cmp-text--quote

Fai clic su Fine per salvare le modifiche ai criteri di testo.

Applicare lo stile di blocco del preventivo

Passa all'articolo La Skateparks nell'editor di AEM Sites all'indirizzo: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
In modalità Modifica, scegli un componente Testo. Modifica il componente per includere un elemento preventivo:
Seleziona il componente di testo e fai clic sull'icona pennello, quindi seleziona lo stile Blocco preventivo:

Utilizza gli strumenti per sviluppatori del browser per controllare il markup. Dovresti vedere che il nome della classe cmp-text--quote è stato aggiunto all'elemento div esterno del componente:

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>

Implementare lo stile di blocco del preventivo - ui.frontend

Ora implementiamo lo stile Quote Block utilizzando il modulo ui.frontend del progetto AEM.

Se non è già in esecuzione, avviare il processo watch dal modulo ui.frontend:

code language-shell
`$ npm run watch`

Aggiorna il file text.scss da: 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 questo caso, gli elementi HTML non elaborati sono interessati dagli stili. Questo perché il componente Testo fornisce un editor Rich Text per gli autori di contenuto. La creazione di stili direttamente rispetto al contenuto dell’editor Rich Text deve essere eseguita con attenzione ed è ancora più importante definire in modo preciso gli stili.

Torna nuovamente al browser e osserva che è stato aggiunto lo stile di blocco Preventivo:
Arresta il server di sviluppo Webpack.

Larghezza fissa - Contenitore (bonus) layout-container

I componenti Contenitore sono stati utilizzati per creare la struttura di base del modello per pagina articolo e fornire le zone di rilascio per consentire agli autori di contenuto di aggiungere contenuto a una pagina. I contenitori possono inoltre utilizzare il sistema di stili, fornendo agli autori di contenuto ulteriori opzioni per la progettazione dei layout.

Il contenitore principale del modello Pagina articolo contiene i due contenitori modificabili e ha una larghezza fissa.

Contenitore principale

Contenitore principale nel modello pagina articolo.

Il criterio del contenitore principale imposta l'elemento predefinito come main:

Criteri contenitore principale

Il CSS che corregge il contenitore principale contenitore è impostato nel modulo ui.frontend in 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;
}

Invece di eseguire il targeting dell'elemento HTML main, è possibile utilizzare il sistema di stili per creare uno stile a larghezza fissa come parte del criterio Contenitore. Il sistema di stili potrebbe consentire agli utenti di passare da a larghezza fissa a a larghezza fluida.

Sfida bonus: utilizza gli insegnamenti appresi dagli esercizi precedenti e utilizza il sistema di stili per implementare gli stili Larghezza fissa e Larghezza fluida per il componente Contenitore.

Congratulazioni. congratulations

Congratulazioni, la pagina dell’articolo è quasi stilizzata e hai acquisito un’esperienza pratica utilizzando il sistema di stili dell’AEM.

Passaggi successivi next-steps

Scopri i passaggi end-to-end per creare un componente AEM personalizzato che visualizza il contenuto creato in una finestra di dialogo ed esplora lo sviluppo di un modello Sling per incapsulare la logica di business che popola l’HTL del componente.

Visualizza il codice finito in GitHub oppure rivedi e distribuisci il codice localmente in nel ramo Git tutorial/style-system-solution.

Clona l'archivio github.com/adobe/aem-wknd-guides.
Controllare il ramo tutorial/style-system-solution.

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9