Flusso di lavoro Theming theming
In questo capitolo vengono aggiornate le origini tema di un sito Adobe Experience Manager per applicare stili specifici per il brand. Scopri come utilizzare un server proxy per visualizzare un’anteprima degli aggiornamenti CSS e JavaScript mentre eseguiamo il codice rispetto al sito live. Questo tutorial illustra anche come distribuire aggiornamenti del tema in un sito AEM utilizzando la pipeline front-end di Adobe Cloud Manager.
Alla fine il nostro sito viene aggiornato per includere stili corrispondenti al brand WKND.
Prerequisiti prerequisites
Questo è un tutorial in più parti e si presume che i passaggi descritti nel capitolo Modelli di pagina siano stati completati.
Obiettivi
- Scopri come scaricare e modificare le origini del tema di un sito.
- Scopri come confrontare il codice con il sito live per un’anteprima in tempo reale.
- Comprendi il flusso di lavoro end-to-end per distribuire aggiornamenti compilati di CSS e JavaScript come parte di un tema utilizzando la pipeline front-end di Adobe Cloud Manager.
Aggiornare un tema theme-update
Quindi, apporta modifiche alle sorgenti del tema in modo che il sito corrisponda all’aspetto del marchio WKND.
Passaggi di alto livello per il video:
- Creare un utente locale in AEM da utilizzare con un server di sviluppo proxy.
- Scarica le sorgenti del tema dall’AEM e aprile utilizzando un IDE locale, come VSCode.
- Modifica le origini del tema e utilizza un server di sviluppo proxy per visualizzare in anteprima le modifiche a CSS e JavaScript in tempo reale.
- Aggiorna le sorgenti del tema in modo che l’articolo della rivista corrisponda agli stili e ai modelli del marchio WKND.
File di soluzione
Scarica gli stili completati per il tema di esempio WKND
Distribuire un tema utilizzando una pipeline front-end deploy-theme
Distribuire gli aggiornamenti a un tema in un ambiente AEM utilizzando la pipeline front-end di Cloud Manager.
Passaggi di alto livello per il video:
-
Crea un nuovo archivio Git in Cloud Manager
-
Aggiungi il progetto origini tema all’archivio Git Cloud Manager:
code language-shell $ cd <PATH_TO_THEME_SOURCES_FOLDER> $ git init -b main $ git add . $ git commit -m "initial commit" $ git remote add origin <CLOUD_MANAGER_GIT_REPOSITORY_URL> -
Configura una pipeline front-end in Cloud Manager per distribuire il codice front-end.
-
Esegui la pipeline front-end per distribuire gli aggiornamenti all’ambiente AEM di destinazione.
Esempio di pronti contro termine
Esistono un paio di esempi di repository GitHub che possono essere utilizzati come riferimento:
- aem-site-template-standard
- aem-site-template-basic-theme-e2e - Utilizzato come esempio per progetti "reali".
Congratulazioni. congratulations
Congratulazioni, hai appena aggiornato e implementato un tema per AEM!
Passaggi successivi next-steps
Approfondisci lo sviluppo dell'AEM e comprendi meglio la tecnologia sottostante creando un sito utilizzando Archetipo progetto AEM.