Sviluppo con il sistema di stili developing-with-the-style-system
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 l'impostazione di un ambiente di sviluppo locale.
Si consiglia inoltre di rivedere Librerie lato client e flusso di lavoro front-end tutorial per comprendere le nozioni di base delle librerie lato client e i vari strumenti front-end integrati nel progetto AEM.
Progetto iniziale
Consulta il codice della riga di base su cui si basa l’esercitazione:
-
Consulta la sezione
tutorial/style-system-start
ramo da GitHubcode 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 si utilizza AEM 6.5 o 6.4, aggiungere classic
profilo a qualsiasi comando Maven.code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic
Puoi sempre visualizzare il codice finito su GitHub oppure 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 utilizzato Feature del sistema di stili per creare varianti di Titolo e Testo componenti utilizzati nella pagina dell’articolo.
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 del sistema di stili qui. C'è anche un grande 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
nell'ambito del ui.apps modulo. Stili predefiniti degli elementi Titolo (H1
, H2
, H3
…) sono già state implementate nel ui.frontend modulo.
Il Progettazioni articoli WKND contiene 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.
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.
-
Accedi a Pagina articolo modello da: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html
-
In entrata Struttura modalità, nell'area principale Contenitore di layout, seleziona la Policy accanto al simbolo Titolo componente 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
Sottolinea :
cmp-title--underline
Clic Fine per salvare le modifiche apportate al criterio Titolo.
note note NOTE Il valore cmp-title--underline
compila 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.
-
Accedi a La Skatepark articolo nell’editor di AEM Sites all’indirizzo: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
-
In entrata Modifica scegli un componente Titolo. Fai clic su pennello e seleziona la Sottolinea stile:
note note NOTE A questo punto, non si verifica alcuna modifica visibile come underline
non è stato implementato. Nell’esercizio successivo, questo stile viene implementato. -
Fai clic su Informazioni pagina icona > Visualizza come pubblicato per esaminare la pagina all’esterno dell’editor AEM.
-
Utilizza gli strumenti di sviluppo del browser per verificare che il markup intorno al componente Titolo abbia la classe CSS
cmp-title--underline
applicato al div esterno.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>
Implementare lo stile Sottolineato - ui.frontend
Quindi, implementa lo stile Sottolineato utilizzando ui.frontend modulo del progetto AEM. Il server di sviluppo Webpack fornito in bundle con ui.frontend modulo per visualizzare in anteprima gli stili prima di viene utilizzata la distribuzione in un’istanza locale dell’AEM.
-
Avvia il
watch
processo dall'interno del ui.frontend modulo:code language-shell $ cd ~/code/aem-guides-wknd/ui.frontend/ $ npm run watch
Viene avviato un processo che monitora le modifiche apportate al
ui.frontend
e sincronizzano le modifiche all’istanza AEM. -
Restituire l’IDE e aprire il file
_title.scss
da:ui.frontend/src/main/webpack/components/_title.scss
. -
Introduzione di una nuova regola destinata al
cmp-title--underline
classe: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; } } }
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 aderiscono a 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 la Sottolinea e osserva che le modifiche si riflettono visivamente.
Stile blocco preventivo - Testo text-component
Quindi, ripeti passaggi simili per applicare uno stile univoco al Componente Testo. Il componente Testo è stato aggiunto come proxy al progetto in /apps/wknd/components/text
nell'ambito del ui.apps modulo. Gli stili predefiniti degli elementi paragrafo sono già stati implementati in ui.frontend.
Il Progettazioni articoli WKND contiene uno stile univoco per il componente Testo con virgolette:
Aggiungi un criterio di testo
Quindi aggiungi un criterio per i componenti Testo.
-
Accedi a Modello pagina articolo da: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.
-
In entrata Struttura modalità, nell'area principale Contenitore di layout, seleziona la Policy accanto al simbolo Testo componente elencato in Componenti consentiti:
-
Aggiorna il criterio del componente Testo con i seguenti valori:
Titolo criterio*: Testo contenuto
Plug-in > Stili paragrafo > Abilita stili di paragrafo
Scheda Stili > Aggiungi un nuovo stile
Blocco offerta :
cmp-text--quote
Clic Fine per salvare le modifiche apportate al criterio Testo.
Applicare lo stile di blocco del preventivo
-
Accedi a La Skatepark articolo nell’editor di AEM Sites all’indirizzo: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
-
In entrata Modifica scegliere un componente Testo. Modifica il componente per includere un elemento preventivo:
-
Seleziona il componente testo e fai clic su pennello e seleziona la Blocco offerta stile:
-
Utilizza gli strumenti per sviluppatori del browser per controllare il markup. Dovresti visualizzare il nome della classe
cmp-text--quote
è stato aggiunto all’elemento div esterno del componente: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>
Implementare lo stile di blocco del preventivo - ui.frontend
Ora implementiamo lo stile Blocco preventivo utilizzando ui.frontend modulo del progetto AEM.
-
Se non è già in esecuzione, avviare
watch
processo dall'interno del ui.frontend modulo:code language-shell $ npm run watch
-
Aggiornare il file
text.scss
da:ui.frontend/src/main/webpack/components/_text.scss
: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; } } }
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 utilizzabili dall’autore e ha una larghezza fissa.
Contenitore principale nel modello della pagina dell’articolo.
La politica del Contenitore principale imposta l'elemento predefinito come main
:
CSS che crea Contenitore principale fisso è impostato in ui.frontend modulo 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 di main
HTML, il sistema di stili può essere utilizzato per creare un Larghezza fissa come parte del criterio Contenitore. Il sistema di stili potrebbe offrire agli utenti la possibilità di passare da un’icona all’altra Larghezza fissa e Larghezza fluido contenitori.
- Sfida bonus - utilizzare gli insegnamenti tratti dagli esercizi precedenti e utilizzare il sistema di stili per implementare un Larghezza fissa e Larghezza fluido stili 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 come creare una soluzione completa 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 il GitHub oppure controlla e distribuisci il codice localmente in sul ramo Git tutorial/style-system-solution
.
- Clona il github.com/adobe/aem-wknd-guides archivio.
- Consulta la sezione
tutorial/style-system-solution
filiale.