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

Si tratta di un tutorial in più parti in cui si presume che i passaggi descritti in Modelli di pagina capitolo sono 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. Comprendere il flusso di lavoro end-to-end per distribuire aggiornamenti compilati 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 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 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 Git archivio in Cloud Manager

  2. Aggiungi il progetto delle origini del tema all’archivio Git di 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. Configurare 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.

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 scopri di più sulla tecnologia di base creando un sito utilizzando Archetipo progetto AEM.

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