Workflow de thème

Dans ce chapitre, nous mettons à jour les sources de thème d’un site Adobe Experience Manager pour appliquer des styles spécifiques à la marque. Nous apprenons à utiliser un serveur proxy pour afficher un aperçu des mises à jour CSS et JavaScript pendant que nous codons par rapport au site en direct. Ce tutoriel explique également comment déployer des mises à jour de thème sur un site AEM à l’aide du pipeline front-end d’Adobe Cloud Manager.

À la fin, notre site est mis à jour afin d’inclure des styles correspondant à la marque WKND.

Prérequis

Il s’agit d’un tutoriel en plusieurs parties qui suppose que les étapes décrites dans la section Modèles de page Le chapitre a été terminé.

Objectifs

  1. Découvrez comment télécharger et modifier les sources de thème d’un site.
  2. Découvrez comment comparer le code au site en direct pour obtenir un aperçu en temps réel.
  3. Comprenez le workflow de bout en bout de la diffusion de mises à jour CSS et JavaScript compilées dans le cadre d’un thème à l’aide du pipeline frontal d’Adobe Cloud Manager.

Mettre à jour un thème

Ensuite, apportez des modifications aux sources de thème afin que le site corresponde à l’apparence de la marque WKND.

Étapes de haut niveau pour la vidéo :

  1. Créez un utilisateur local dans AEM à utiliser avec un serveur de développement proxy.
  2. Téléchargez les sources de thèmes depuis AEM et ouvrez-les à l’aide d’un IDE local, comme VSCode.
  3. Modifiez les sources des thèmes et utilisez un serveur de développement proxy pour prévisualiser les modifications CSS et JavaScript en temps réel.
  4. Mettez à jour les sources du thème de sorte que l’article du magazine corresponde aux styles et aux maquettes de la marque WKND.

Fichiers de solution

Téléchargez les styles terminés pour le Exemple de thème WKND

Déploiement d’un thème à l’aide d’un pipeline front-end

Déployez des mises à jour sur un thème dans un environnement AEM à l’aide du pipeline front-end de Cloud Manager.

Étapes de haut niveau pour la vidéo :

  1. Création d’un git référentiel dans Cloud Manager

  2. Ajoutez votre projet de sources de thème au référentiel git de 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. Configurez une Pipeline front-end dans Cloud Manager pour déployer le code frontal.

  4. Exécutez le pipeline front-end pour déployer des mises à jour dans l’environnement AEM cible.

Exemple de référentiels

Il existe quelques exemples de repos GitHub qui peuvent être utilisés comme référence :

Félicitations !

Félicitations, vous venez de mettre à jour et de déployer un thème pour AEM !

Étapes suivantes

Découvrez plus en détail le développement AEM et comprenez mieux la technologie sous-jacente en créant un site à l’aide de la méthode AEM Archétype de projet.

Sur cette page