Workflow de thème theming
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 visualiser un aperçu des mises à jour CSS et JavaScript pendant que nous codons sur le 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.
Finalement, notre site est mis à jour pour inclure des styles correspondant à la marque WKND.
Prérequis prerequisites
Il s’agit d’un tutoriel en plusieurs parties qui suppose que les étapes décrites dans le chapitre Modèles de page ont été terminées.
Objectifs
- Découvrez comment télécharger et modifier les sources de thème d’un site.
- Découvrez comment coder sur le site en direct pour obtenir un aperçu en temps réel.
- Comprenez le workflow de bout en bout de la livraison de mises à jour compilées de CSS et JavaScript dans le cadre d’un thème à l’aide du pipeline front-end d’Adobe Cloud Manager.
Mettre à jour un thème theme-update
Ensuite, apportez des modifications aux sources de thème afin que le site corresponde à l’aspect de la marque WKND.
Étapes de haut niveau pour la vidéo :
- Créez un utilisateur local ou une utilisatrice locale dans AEM à utiliser avec un serveur de développement proxy.
- Téléchargez les sources de thème depuis AEM et ouvrez-les à l’aide d’un IDE local, comme VSCode.
- Modifiez les sources de thème et utilisez un serveur de développement proxy pour prévisualiser les modifications CSS et JavaScript en temps réel.
- Mettez à jour les sources de 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 l’exemple de thème WKND.
Déployer un thème à l’aide d’un pipeline front-end deploy-theme
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 :
-
Créez un nouveau référentiel git dans Cloud Manager.
-
Ajoutez votre projet de sources de thème au référentiel git de 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> -
Configurez un Pipeline front-end dans Cloud Manager pour déployer le code front-end.
-
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 référentiels GitHub qui peuvent être utilisés comme référence :
- aem-site-template-standard.
- aem-site-template-basic-theme-e2e - Utilisé comme exemple pour les projets « en situation réelle ».
Félicitations. congratulations
Félicitations, vous venez de mettre à jour et de déployer un thème sur AEM.
Étapes suivantes next-steps
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 l’Archétype de projet AEM.