Comment ajouter une page dans AEM Edge Delivery Services

Si vous venez de suivre le tutoriel de démarrage officiel 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 AEM. Cet article suppose que vous avez suivi le tutoriel original et que vous avez un site web en cours d'exécution 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 êtes invité à "Créer et partager", puisque vous avez déjà partagé votre dossier avec [email protected] dans le tutoriel 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 dont il faut tenir compte lors de l'édition d'un document dans un projet EDS est le nom du document. Ce nom sera utilisé pour créer l'URL de la page.

Par 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 appelé "nouvelle page", l'URL de cette page lorsqu'elle sera publiée est https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page. Il convient de noter que tous les URL générés seront en minuscules, même si le nom du document est en majuscules. Pour des raisons de lisibilité et de navigation, veillez à ce que les noms de vos documents soient courts et pertinents.

Allez-y et mettez à jour le titre de votre document en le remplaçant par "nouvelle page"

Ajoutons maintenant un titre en haut de notre document. Réglez votre texte sur "Heading 1" et indiquez votre titre.

Voyons ce que cela donne sur le site web. Allez à l'URL générée, dans mon cas https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page, et voyez ce que cela donne.

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

Après quelques instants, votre barre d'outils d'assistance devrait apparaître. Vous devriez remarquer un bouton "prévisualisation" dans la partie gauche avec un point rouge. Ce point rouge indique qu'un nouveau contenu doit être mis en scène et transféré sur le site web. Cliquez sur ce bouton et regardez la page qui s'affiche.

Voici l'aperçu de votre nouvelle page. C'est à cela que ressemblera votre page sur le site "live" une fois que vous l'aurez publiée. Il est important de noter que si le contenu n'a pas été publié, il n'apparaîtra pas sur la page en ligne, et qu'une page qui n'a pas été publiée n'apparaîtra pas sur le site web en ligne. Cela vous permet d'expérimenter le contenu et de le modifier à votre guise sans que les utilisateurs de votre site ne le voient tant que vous n'êtes pas prêt à le publier. Pour l'instant, laissons cette page non publiée et retournons au document Google pour y ajouter du contenu.

Telle qu'elle existe actuellement, notre page est plutôt banale. Ajoutons-y un peu de couleur avec une image. Par souci de simplicité, nous utiliserons l'image de l'ADN bleu de la page d'exemple.

Cliquez sur l'aperçu et regardez ce que cela donne.

C'est très bien ! Si vous ne souhaitez pas que le texte soit superposé à l'image, il vous suffit de placer l'image sous votre texte d'en-tête dans le document au lieu de la placer au-dessus, et vous obtiendrez une page qui ressemblera à celle-ci.

L'incrustation de texte ne se produit que pour la première image de l'article, et seulement lorsqu'elle est formatée comme indiqué initialement, avec le texte en style Titre ou Intitulé 1 directement sous l'image.

Ajoutons maintenant du texte à cet article. J'utiliserai Lorem Ipsum, un texte latin traditionnellement utilisé dans l'industrie de l'édition pour expérimenter des mises en page de texte. Lorum Ipsum nous permet de voir comment le contenu en alphabet arabe apparaîtra sur une page sans être distrait par une lecture accidentelle. N'hésitez pas à ajouter le contenu textuel que vous souhaitez à la place. Voici ce que cela donne dans mon Google Doc :

Et voici ce que cela donne sur ma page de prévisualisation :

Enfin, voyons ce que donnera une image 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 l'aspect qu'elle aura sur le site ci-dessous :

Il convient de noter que l'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 prévisualisée/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 satisfaits de montrer au monde entier, il nous reste une dernière étape à franchir avant la publication. Je veux changer le titre de cette page dans les métadonnées de "Ma nouvelle page" à "Page de démonstration" sans changer le titre de mon article. Je souhaite également ajouter une description aux métadonnées afin de faciliter la recherche de la page par les moteurs de recherche. Pour ce faire, nous devons ajouter un bloc de métadonnées.

La manière la plus simple d'ajouter un bloc de métadonnées est de copier et de coller celui de la page d'accueil de la démo, mais si vous souhaitez en créer un à partir de zéro, je vous guiderai à travers ce processus.

Tout d'abord, insérez un tableau 2X3 à la fin de votre document. Mettez les cellules de la première ligne en surbrillance, cliquez avec le bouton droit de la souris 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 à droite de la cellule "Titre" et la description à 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 affiché à 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 le titre et la 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 de prévisualisation, et voyez votre nouvelle page web en direct sur votre site web.

Félicitations pour l'ajout d'une page à votre site web ! Si vous avez visité l'URL de cette page avant de la publier et que vous avez obtenu l'erreur 404 Page Not Found, il est possible que vous continuiez à voir cette erreur après la publication. Cela peut se produire pour un certain nombre de 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 ait été pris en compte. Attendez une minute ou deux pour rafraîchir 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

Nous contacter

Episodes du podcast