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

  1. Scopri come scaricare e modificare le origini del tema di un sito.
  2. Scopri come confrontare il codice con il sito live per un’anteprima in tempo reale.
  3. 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:

  1. Creare un utente locale in AEM da utilizzare con un server di sviluppo proxy.
  2. Scarica le sorgenti del tema dall’AEM e aprile utilizzando un IDE locale, come VSCode.
  3. 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.
  4. 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:

  1. Crea un nuovo archivio Git in Cloud Manager

  2. 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>
    
  3. Configura una pipeline front-end in Cloud Manager per distribuire il codice front-end.

  4. 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:

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.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9