Comment ajouter une page dans AEM Edge Delivery Services

Si vous venez de terminer le didacticiel officiel de mise en route d'Edge Deliver Services (ci-après EDS), vous vous demandez peut-être comment développer le site Web que vous venez de créer. Cet article vous montrera comment créer et publier une nouvelle page sur votre site Web AEM. Cet article suppose que vous avez terminé le didacticiel d'origine et que vous disposez d'un site Web opérationnel avec l'extension AEM Sidekick installée sur votre navigateur.

Tout d’abord, créez un nouveau fichier dans votre Google Drive

Lorsque vous créez votre nouveau fichier, vous serez invité à « Créer et partager », car vous avez déjà partagé votre dossier avec helix@adobe.com dans le didacticiel officiel. Le partage du dossier et, par extension, des documents qu'il contient, permet à EDS de voir et d'extraire le contenu de votre Google Drive vers votre site Web. Cliquez sur « Créer et partager » et commencez à modifier votre nouveau document.

La première chose à prendre en compte lors de la modification d'un document dans un projet EDS est le nom du document. Ce nom sera utilisé pour créer l'URL sur laquelle se trouve la page.

À titre d'exemple, l'URL principale du projet que vous voyez dans les captures d'écran de ce blog est https://main--drews-franklin-demo--drew-cummings.hlx.live/ .

Si je crée un nouveau document nommé « nouvelle page », l'URL à laquelle cette page sera publiée est https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page. Il convient de noter que toutes les URL générées seront en minuscules, même si le nom du document est en majuscules. Pour des raisons de lisibilité et de navigation, assurez-vous que les noms de vos documents sont courts et pertinents.

Allez-y et mettez à jour le titre de votre document en « nouvelle page »

Ajoutons maintenant un titre en haut de notre document. Définissez votre texte sur « Titre 1 » et inscrivez votre titre.

Voyons à quoi cela ressemble sur le site Web. Allez-y et accédez à l'URL générée, dans mon cas https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page , et voyez à quoi cela ressemble.

Oh non ! Si vous voyez cela, ne paniquez pas. Voici à quoi ressemble une erreur « page introuvable » dans la démo EDS par défaut. Notre site Web ne parvient pas à trouver notre page pour le moment, car nous ne l'avons pas encore prévisualisée et publiée. Revenez à votre document et cliquez sur l'extension AEM Sidekick, l'icône la plus à gauche dans la capture d'écran ci-dessous

Après un moment, votre barre d'outils d'aide devrait apparaître. Vous devriez remarquer un bouton « Aperçu » dans la partie gauche de celle-ci avec un point rouge. Ce point rouge indique qu'il y a du nouveau contenu à mettre en scène et à envoyer sur le site Web. Cliquez sur ce bouton et regardez la page qu'il charge pour vous.

Il s'agit de l' aperçu de votre nouvelle page. Voici à quoi ressemblera votre page sur le site « en ligne » une fois que vous l'aurez publiée. Il est important de noter que même si le contenu n'a pas été publié, il n'apparaîtra pas sur la page en ligne, et une page qui n'a pas été publiée n'apparaîtra pas sur le site Web en ligne. Cela vous permet de tester le contenu et de modifier les éléments à votre guise sans que les utilisateurs de votre site ne le voient jusqu'à ce que vous soyez prêt à le publier. Pour l'instant, laissons cette page non publiée et revenons au document Google pour ajouter du contenu.

Telle qu'elle est actuellement, notre page est plutôt simple. Ajoutons-lui un peu de couleur avec une image. Pour plus de simplicité, nous utiliserons l'image ADN bleue de la page d'exemple.

Cliquez sur Aperçu et voyez à quoi cela ressemble.

C'est beau ! Si vous ne voulez pas que le texte soit superposé sur l'image, placez simplement l'image sous le texte de votre titre dans le document plutôt qu'au-dessus et vous obtiendrez une page qui ressemble à ceci.

La superposition de texte n'apparaît que pour la première image de l'article, et uniquement lorsqu'elle est formatée comme indiqué initialement, avec le texte dans le style Titre ou Titre 1 directement sous l'image.

Ajoutons maintenant du contenu textuel à cet article. J'utiliserai le Lorem Ipsum, un texte latin traditionnellement utilisé dans le secteur de l'édition pour expérimenter des mises en page de texte. Le Lorum Ipsum nous permet de voir à quoi ressemblera le contenu de l'alphabet arabe sur une page sans nous laisser distraire par une lecture accidentelle. N'hésitez pas à ajouter le contenu textuel de votre choix. Voici à quoi cela ressemble dans mon document Google :

Et voici à quoi cela ressemble sur ma page d'aperçu :

Enfin, voyons à quoi ressemblera une image lorsqu'elle sera placée en ligne avec le contenu de la page. J'ajouterai l'une des images de la page de démonstration après le premier paragraphe pour montrer à quoi elle ressemblera sur le site ci-dessous :

Il convient de noter qu'EDS extrait le contenu du document Google et l'utilise pour générer les fichiers HTML qui créent le site Web. Par conséquent, la taille de l'image dans le document Google ne correspond pas à la taille de l'image sur la page d'aperçu/en direct. Si vous souhaitez ajuster la taille de l'image sur le site, vous devez ajuster la résolution native de l'image.

Maintenant que nous avons une page que nous sommes prêts à montrer au monde, il nous reste une dernière étape à accomplir avant de la publier. Je souhaite modifier le titre de cette page dans les métadonnées de « Ma nouvelle page » à « Page de démonstration » sans modifier le titre de mon article. Je souhaite également ajouter une description aux métadonnées pour que la page soit plus facile à trouver pour les moteurs de recherche. Pour ce faire, nous devons ajouter un bloc de métadonnées.

Le moyen le plus simple d'ajouter un bloc de métadonnées est de simplement copier et coller celui de la page d'accueil de démonstration, mais si vous souhaitez en créer un à partir de zéro, je vous guiderai tout au long de ce processus.

Tout d’abord, insérez un tableau 2X3 à la fin de votre document. Sélectionnez les cellules de la première ligne, faites un clic droit et sélectionnez « fusionner les cellules ».

Tapez « Métadonnées » dans la ligne supérieure, puis tapez « Titre » et « Description » dans les cellules de gauche des deux lignes suivantes. Tapez le titre que vous souhaitez à droite de la cellule « Titre » et la description que vous souhaitez à droite de la cellule « Description ». Le résultat final devrait ressembler à ceci :

Allez-y et prévisualisez la page maintenant. Vous remarquerez que le contenu de la page n'a pas changé du tout, mais si vous regardez l'onglet dans Chrome, notre nouveau titre sera répertorié à la place du titre par défaut que nous avions précédemment.

Si nous inspectons le fichier HTML de la page Web, nous pouvons voir que notre titre et notre description sont présents en tant que propriétés de la page Web

Vous êtes prêt à publier ! Cliquez sur le bouton « Publier » sur le côté gauche de votre extension AEM Sidekick qui apparaît sur la page d'aperçu et visualisez votre nouvelle page Web en direct sur votre site Web.

Félicitations pour l'ajout d'une page à votre site Web ! Si vous avez déjà visité l'URL de cette page avant de la publier et que vous avez reçu l'erreur 404 "Page introuvable", il est possible que vous voyiez toujours cette erreur après la publication. Cela peut se produire pour plusieurs raisons, mais à moins que vous n'ayez reçu un message d'erreur de l'extension AEM Sidekick, il est peu probable que votre contenu soit réellement passé. Attendez simplement une minute ou deux pour actualiser la page et vous devriez voir votre page publiée.

Si vous avez apprécié ce tutoriel et souhaitez en savoir plus sur les produits AEM, consultez notre article sur ce qu'est AEM ici .

À propos de l'auteur

Contactez-nous

Épisodes de podcast