Modèles de page

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 de AdobeXD. Lors du processus de création du modèle, les composants principaux et les configurations de stratégie avancées sont traités.

Prérequis

Il s’agit d’un tutoriel en plusieurs parties qui suppose que les étapes décrites dans la section Créer du contenu et publier les modifications Le chapitre a été terminé.

Objectif

  1. Découvrez les détails des modèles de page et comment les stratégies peuvent être utilisées pour appliquer un contrôle granulaire du contenu de la page.
  2. Découvrez comment les modèles et les pages sont liés.
  3. Créez un modèle et créez une page.

Ce que vous allez créer

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 sera basé sur des conceptions et un kit d’interface utilisateur produit dans Adobe XD. Ce chapitre se concentre uniquement sur la construction de la structure ou du squelette du modèle. Aucun style ne sera implémenté, mais le modèle et les pages seront fonctionnels.

Créer un modèle de page d’article de magazine

Lors de la création d’une page, vous devez sélectionner un modèle. C’est la base pour la création de 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 zones principales de Modèles de page:

  1. Structure - définit les composants qui font partie du modèle. Ils ne seront pas modifiables par les auteurs de contenu.
  2. Contenu initial : définit les composants dont le modèle commencera, qui peuvent être modifiés et/ou supprimés par les auteurs de contenu.
  3. Stratégies - définit les configurations sur le comportement des composants et les options disponibles pour les auteurs.

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 le vôtre).

Miniature du modèle de page d’article

Package de solution

Terminé solution du modèle Magazine peut être téléchargé et installé via le gestionnaire de modules.

Mise à jour de l’en-tête et du pied de page avec les fragments d’expérience

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 une Fragment d’expérience. Les fragments d’expérience permettent aux utilisateurs de combiner plusieurs composants afin de créer un seul composant pouvant faire référence. Les fragments d’expérience ont l’avantage de prendre en charge la gestion multisite et localisation.

Le modèle 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 :

  1. Téléchargez l’exemple de module de contenu WKND-Starter-Assets-Skate-Article-1.2.zip.
  2. Téléchargez et installez le module de contenu à l’aide de Package Manager.
  3. Mise à jour des fragments d’expérience d’en-tête et de pied de page pour utiliser le logo WKND

Créer une page d’article Magazine

Créez ensuite une page à l’aide du modèle Page Article du 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 la variable texte fourni pour remplir le corps de l’article.

Félicitations !

Félicitations, vous venez de créer un modèle et une page avec Adobe Experience Manager Sites.

Étapes suivantes

À ce stade, la page d’article de magazine et le site ne correspondent pas aux styles de marque pour WKND. Suivez la Thème tutoriel pour découvrir les bonnes pratiques relatives à la mise à jour du code frontal CSS et JavaScript utilisé pour appliquer des styles globaux au site.

Package de solution

Un package de solution pour ce chapitre peut être téléchargé : WKND-Magazine-Template-SOLUTION-1.0.zip.

Sur cette page