Flusso di lavoro dei temi

In questo capitolo verranno aggiornate le origini dei temi di un sito Adobe Experience Manager per applicare stili specifici per il marchio. Impareremo come utilizzare un server proxy per visualizzare un’anteprima degli aggiornamenti CSS e Javascript durante la codifica rispetto al sito live. Questa esercitazione illustra anche come distribuire gli aggiornamenti a un tema in un sito AEM utilizzando la pipeline Front End di Adobe Cloud Manager.

Alla fine il nostro sito verrà aggiornato per includere gli stili che corrispondono al marchio WKND.

Prerequisiti

Si tratta di un tutorial in più parti e si presume che i passaggi descritti in Modelli di pagina capitolo completato.

Obiettivi

  1. Scopri come scaricare e modificare le origini dei temi di un sito.
  2. Scopri come eseguire il codice rispetto al sito live per un’anteprima in tempo reale.
  3. Comprendi il flusso di lavoro end-to-end della distribuzione degli aggiornamenti CSS e JavaScript compilati come parte di un tema utilizzando la pipeline front-end di Adobe Cloud Manager.

Aggiornare un tema

Quindi, apporta modifiche alle origini tema in modo che il sito corrisponda all’aspetto del marchio WKND.

Passi di alto livello per il video:

  1. Crea un utente locale in AEM da utilizzare con un server di sviluppo proxy.
  2. Scarica le origini di tema da AEM e apri utilizzando un IDE locale, come VSCode.
  3. Modifica le origini dei temi e utilizza un server di sviluppo proxy per visualizzare in anteprima le modifiche CSS e JavaScript in tempo reale.
  4. Aggiorna le origini dei temi in modo che l'articolo della rivista corrisponda agli stili e ai modelli con brand WKND.

File della soluzione

Scarica gli stili completati per la Tema di esempio WKND

Distribuire un tema utilizzando una pipeline front-end

Distribuire gli aggiornamenti a un tema in un ambiente AEM utilizzando la pipeline front-end di Cloud Manager.

Passi di alto livello per il video:

  1. Creare un nuovo git archivio in Cloud Manager

  2. Aggiungi il progetto origini tema all’archivio Git di Cloud Manager:

    $ 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 un 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.

Operazioni di pronti contro termine di esempio

Ci sono un paio di esempi di repository GitHub che possono essere utilizzati come riferimento:

Congratulazioni!

Congratulazioni, hai appena aggiornato e distribuito un tema a AEM!

Passaggi successivi

Approfondisci l'AEM dello sviluppo e scopri di più sulla tecnologia sottostante creando un sito utilizzando il Archetipo di progetto AEM.

In questa pagina