Modèles de page page-templates
Dans ce chapitre, nous allons explorer la relation entre un modèle de page et une page. Nous allons créer un modèle d’article de magazine sans style basé sur des maquettes d’Adobe XD. Lors du processus de création du modèle, les composants principaux et les configurations de stratégie avancées sont abordés.
Prérequis prerequisites
Il s’agit d’un tutoriel en plusieurs parties qui suppose que les étapes décrites dans le chapitre Créer du contenu et publier des modifications ont été terminées.
Objectif
- Découvrez les détails des modèles de page et comment les stratégies peuvent être utilisées pour appliquer un contrôle précis du contenu de la page.
- Découvrez comment les modèles et les pages sont liés.
- Créez un modèle et une page.
Ce que vous allez créer what-you-will-build
Dans cette partie du tutoriel, vous allez créer un modèle de page d’article de magazine qui pourra être utilisé pour créer de nouveaux articles de magazine et qui s’aligne sur une structure commune. Le modèle est basé sur des conceptions et un kit d’interface utilisateur produits dans Adobe XD. Ce chapitre se concentre uniquement sur la création de la structure, ou squelette, du modèle. Aucun style n’est implémenté, mais le modèle et les pages sont fonctionnels.
Créer le modèle de page d’article de magazine
Lors de la création d’une page, vous devez sélectionner un modèle, qui est utilisé comme base pour créer la page. Le modèle définit la structure de la page créée, le contenu initial et les composants autorisés.
Il existe 3 domaines principaux dans les Modèles de page :
- Structure : définit les composants qui font partie du modèle. Ces composants ne sont pas modifiables par les créateurs et créatrices de contenu.
- Contenu initial : définit les composants avec lesquels le modèle commence. Ces composants peuvent être modifiés et/ou supprimés par les créateurs et créatrices de contenu.
- Stratégies : elles définissent des configurations sur le comportement des composants et sur les options disponibles pour les créateurs et créatrices.
Créez ensuite un modèle dans AEM qui correspond à la structure des maquettes. Cela se produit dans une instance locale d’AEM. Suivez les étapes de la vidéo ci-dessous :
Vous pouvez utiliser la miniature suivante pour identifier votre modèle (ou télécharger la vôtre).
Package de solution
Une solution du modèle de magazine terminée peut être téléchargée et installée via le gestionnaire de packages.
Mettre à jour l’en-tête et le pied de page avec des fragments d’expérience experience-fragments
Une pratique courante lors de la création d’un contenu global, tel qu’un en-tête ou un pied de page, consiste à utiliser un Fragment d’expérience. Les fragments d’expérience permettent aux utilisateurs et utilisatrices de combiner plusieurs composants afin de créer un seul composant référençable. Les fragments d’expérience ont l’avantage de prendre en charge la gestion multisite et la localisation.
Le modèle de site a généré un en-tête et un pied de page. Ensuite, mettez à jour les fragments d’expérience pour qu’ils correspondent aux maquettes. Suivez les étapes de la vidéo ci-dessous :
Étapes de haut niveau pour la vidéo ci-dessous :
- Téléchargez le package d’exemple de contenu WKND-Starter-Assets-Skate-Article-1.2.zip.
- Téléchargez et installez le package de contenu à l’aide du gestionnaire de packages.
- Mettez à jour les fragments d’expérience d’en-tête et de pied de page pour utiliser le logo WKND.
Créer une page d’article de magazine
Créez ensuite une page à l’aide du modèle de page d’article de magazine. Créez le contenu de la page pour qu’il corresponde aux maquettes du site. Suivez les étapes de la vidéo ci-dessous :
Utilisez le texte fourni pour remplir le corps de l’article.
Félicitations. congratulations
Félicitations, vous venez de créer un modèle et une page avec Adobe Experience Manager Sites.
Étapes suivantes next-steps
À ce stade, la page d’article de magazine et le site ne correspondent pas aux styles de marque pour WKND. Suivez le tutoriel Thème pour connaître les bonnes pratiques de mise à jour du code front-end CSS et Javascript utilisé pour appliquer des styles généraux au site.
Package de solution
Un package de solution pour ce chapitre peut être téléchargé : WKND-Magazine-Template-SOLUTION-1.0.zip.