Pages et modèles pages-and-template

Consultez la branche tutorial/pages-templates-start à partir de GitHub.

$ cd ~/code/aem-guides-wknd
$ git checkout tutorial/pages-templates-start

Déployez la base de code sur une instance locale d’AEM à l’aide de vos compétences Maven :

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Créez un modèle à l’aide du Type de modèle de page appelé Page d’article.

Passez en mode Structure.

Ajoutez un composant Fragment d’expérience pour agir comme le composant En-tête en haut du modèle.

• Configurez le composant pour pointer vers /content/experience-fragments/wknd/us/en/site/header/master.
• Définissez la politique sur En-tête de page et vérifiez que l’Élément par défaut est défini sur header. L’élément header est ciblé avec CSS dans le chapitre suivant.

Ajoutez un composant Fragment d’expérience pour qu’il agisse comme le Pied de page au bas du modèle.

• Configurez le composant pour pointer vers /content/experience-fragments/wknd/us/en/site/footer/master.
• Définissez la politique sur Pied de page et vérifiez que l’Élément par défaut est défini sur footer. L’élément footer est ciblé avec CSS dans le chapitre suivant.

Verrouillez le conteneur principal qui a été inclus lors de la création initiale du modèle.

• Définissez la politique sur Page principale et vérifiez que l’Élément par défaut est défini sur main. L’élément main est ciblé avec CSS dans le chapitre suivant.

Ajoutez un composant Image au conteneur principal.

• Déverrouillez le composant Image.

Ajoutez un composant Chemin de navigation sous le composant Image dans le conteneur principal.

• Créez une politique pour le composant Chemin de navigation appelé Page d’article - Chemin de navigation. Définissez le Niveau de départ de navigation sur 4.

Ajoutez un composant Conteneur sous le composant Chemin de navigation et à l’intérieur du conteneur principal. Cela agit comme le Conteneur Contenu pour le modèle.

• Déverrouillez le conteneur Contenu.
• Définissez la politique sur Contenu de la page.

Ajoutez un autre composant Conteneur sous le composant Conteneur Contenu. Cela agit comme le conteneur Rail latéral pour le modèle.

• Déverrouillez le conteneur Rail latéral.
• Créez une politique appelée Page d’article - Rail latéral.
• Configurez les Composants autorisés sous Projet de sites WKND - Contenu pour inclure : Bouton, Télécharger, Image, Liste, Séparateur, Partage sur les médias sociaux, Texte et Titre.

Mettez à jour la politique du conteneur Racine de page. Il s’agit du conteneur le plus à l’extérieur du modèle. Définissez la politique sur Racine de page.

• Sous Paramètres du conteneur, définissez la Disposition sur Grille réactive.

Activez le mode Disposition pour le Conteneur Contenu. Faites glisser la poignée de la droite vers la gauche et rétrécissez le conteneur pour qu’il fasse huit colonnes de large.

Activez le mode Disposition pour le Conteneur Rail latéral. Faites glisser la poignée de la droite vers la gauche et rétrécissez le conteneur pour qu’il fasse quatre colonnes de large. Faites ensuite glisser la poignée gauche de la gauche vers la droite d’une colonne pour que le conteneu ait une largeur de 3 colonnes et laissez un espace d’une colonne avec le Conteneur Contenu.

Ouvrez l’émulateur mobile et passez à un point d’arrêt mobile. Réactivez le mode Disposition et faites en sorte que le Conteneur Contenu et le Conteneur Rail latéral fassent toute la largeur de la page. Les conteneurs sont ainsi empilés verticalement au point d’arrêt mobile.

Mettez à jour la politique du composant Texte dans le Conteneur Contenu.

• Définissez la politique sur Texte du contenu.
• Sous Modules externes > Styles de paragraphe, activez l’option Activer les styles de paragraphe et assurez-vous que l’option Citation est activée.

Passez en mode Contenu initial.

Ajoutez un composant Titre au Conteneur Contenu. Il agit comme le titre de l’article. Lorsqu’il est vide, il affiche automatiquement le titre de la page active.

Ajoutez un second composant Titre sous le premier.

• Configurez le composant avec le texte suivant : Par auteur. Il s’agit d’un espace réservé.
• Définissez le type sur H4.

Ajoutez un composant Texte sous le composant Titre Par auteur.

Ajoutez un composant Titre au Conteneur Rail latéral.

• Configurez le composant avec le texte suivant : « Share this Story ».
• Définissez le type sur H5.

Ajoutez un composant Partage sur les médias sociaux sous le composant Titre Share this Story.

Ajoutez un composant Séparateur sous le composant Partage sur les médias sociaux.

Ajoutez un composant Télécharger sous le composant Séparateur.

Ajoutez un composant Liste sous le composant Télécharger.

Mettez à jour les Propriétés de page initiale pour le modèle.

• Sous Réseaux sociaux > Partage sur les médias sociaux, activez Facebook et Pinterest.

Affichez le modèle dans la console Modèle en accédant à http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd

Activez le modèle Page d’article.

Modifiez les propriétés du modèle Page d’article et chargez la miniature suivante afin d’identifier rapidement les pages créées à l’aide du modèle Page d’article :

Téléchargez l’exemple de package de contenu WKND-PagesTemplates-Content-Assets.zip.

Téléchargez et installez le package de contenu à l’aide de Package Manager dans http://localhost:4502/crx/packmgr/index.jsp

Mettez à jour le modèle Variante web, qui est utilisé pour les fragments d’expérience dans http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html

• Mettez à jour la politique du composant Conteneur sur le modèle.
• Définissez la politique sur Racine XF.
• Sous Composants autorisés, sélectionnez le groupe de composants Projet de sites WKND - Structure pour inclure les composants Navigation par langue, Navigation et Quick Search.

Ouvrez le fragment d’expérience qui effectue le rendu de l’en-tête dans http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html

Configurez le Conteneur racine du fragment. Il s’agit du Conteneur le plus à l’extérieur.

• Définissez Disposition sur Grille réactive.

Ajoutez Logo sombre WKND en tant qu’image dans la partie supérieure du Conteneur. Le logo a été inclus dans le package installé lors d’une étape précédente.

• Modifiez la disposition du Logo sombre WKND pour qu’il ait une largeur de deux colonnes. Faites glisser les poignées de la droite vers la gauche.
• Configurez le logo avec le Texte de remplacement suivant : Logo WKND.
• Configurez le logo pour qu’il soit un Lien vers la page d’accueil /content/wknd/us/en.

Configurez le composant Navigation qui est déjà placé sur la page.

• Définissez Exclure les niveaux racine sur 1.
• Définissez Profondeur de la structure de navigation sur 1.
• Modifiez la disposition du composant Navigation pour qu’il ait une largeur de huit colonnes. Faites glisser les poignées de la droite vers la gauche.

Supprimez le composant Navigation par langue.

Modifiez la disposition du composant Search pour qu’il ait une largeur de deux colonnes. Faites glisser les poignées de la droite vers la gauche. Tous les composants doivent maintenant être alignés horizontalement sur une seule ligne.

Ouvrez le fragment d’expérience qui effectue le rendu du pied de page dans http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html

Configurez le Conteneur racine du fragment. Il s’agit du Conteneur le plus à l’extérieur.

• Définissez Disposition sur Grille réactive

Ajoutez Logo clair WKND en tant qu’image dans la partie supérieure du Conteneur. Le logo a été inclus dans le package installé lors d’une étape précédente.

• Modifiez la disposition du Logo clair WKND pour qu’il ait une largeur de deux colonnes. Faites glisser les poignées de la droite vers la gauche.
• Configurez le logo avec le Texte de remplacement suivant : Logo clair WKND.
• Configurez le logo en tant que Lien vers la page d’accueil /content/wknd/us/en.

Ajoutez un composant Navigation sous le logo. Configurez le composant Navigation :

• Définissez Exclure les niveaux racine sur 1.
• Décochez Collecter toutes les pages enfants.
• Définissez Profondeur de la structure de navigation sur 1.
• Modifiez la disposition du composant Navigation pour qu’il ait une largeur de huit colonnes. Faites glisser les poignées de la droite vers la gauche.

Accédez à la console Sites à l’adresse http://localhost:4502/sites.html/content/wknd/us/en/magazine.

Créez une page sous WKND > US > EN > Magazine.

• Choisissez le modèle Page d’article.
• Sous Propriétés, définissez le Titre suivant : « Ultimate Guide to LA Skateparks ».
• Définissez le Nom suivant : « guide-la-skateparks ».

Remplacez le titre Par auteur par le texte suivant : De Stacey Roswells.

Mettez à jour le composant Texte pour inclure un paragraphe afin de remplir l’article. Vous pouvez utiliser le fichier texte suivant comme copie : la-skate-parks-copy.txt.

Ajoutez un autre composant Texte.

• Mettez à jour le composant pour inclure la citation suivante : Il n’y a pas de meilleur endroit pour s’amuser que Los Angeles.
• Passez en mode plein écran dans l’éditeur de texte enrichi et modifiez la citation ci-dessus pour utiliser l’élément Citation.

Continuez à remplir le corps de l’article pour qu’il corresponde aux maquettes.

Configurez le composant Télécharger pour utiliser une version PDF de l’article.

• Sous Télécharger > Propriétés, cochez la case pour Obtenir le titre à partir de la ressource DAM.
• Définissez la Description sur : Découvrez l’histoire complète.
• Définissez le Texte de l’action sur : Télécharger le fichier PDF.

Configurez le composant Liste.

• Sous Paramètres de liste > Créer la liste à l’aide de, sélectionnez Pages enfants.
• Définissez Page parente sur /content/wknd/us/en/magazine.
• Sous Paramètres d’élément, cochez Éléments de lien et Afficher la date.

Ouvrez CRXDE-Lite et utilisez la navigation dans l’arborescence pour accéder à /content/wknd/us/en/magazine/guide-la-skateparks.

Cliquez sur le nœud jcr:content sous la page la-skateparks et consultez les propriétés :

Notez la valeur de cq:template, qui pointe vers /conf/wknd/settings/wcm/templates/article-page, le modèle de page d’article créé précédemment.

Notez également la valeur de sling:resourceType, qui pointe vers wknd/components/page. Il s’agit du composant de page créé par l’archétype de projet AEM et responsable du rendu de la page en fonction du modèle.

Développez le nœud jcr:content sous /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content et affichez la hiérarchie de nœuds :

Vous devriez être en mesure de mapper vaguement chacun des nœuds aux composants qui ont été créés. Voyez si vous pouvez identifier les différents conteneurs de disposition utilisés en examinant les nœuds dotés du préfixe container.

Examinez ensuite le composant Page dans /apps/wknd/components/page. Affichez les propriétés du composant dans CRXDE Lite :

Il n’existe que deux scripts HTL, customfooterlibs.html et customheaderlibs.html, sous le composant Page. Comment ce composant effectue-t-il le rendu de la page ?

La propriété sling:resourceSuperType pointe sur core/wcm/components/page/v2/page. Cette propriété permet au composant de page de WKND d’hériter de toutes les fonctionnalités du composant Page des composants principaux. Voici le premier exemple d’un élément appelé Modèle de composant proxy. Vous trouverez plus d’informations ici.

Examinez un autre composant dans les composants WKND : le composant Breadcrumb à partir de : /apps/wknd/components/breadcrumb. Notez que la même propriété sling:resourceSuperType est disponible, mais cette fois, elle pointe vers core/wcm/components/breadcrumb/v2/breadcrumb. Il s’agit d’un autre exemple d’utilisation du modèle de composant proxy pour inclure un composant principal. En fait, tous les composants de la base de code WKND sont des proxy des composants principaux d’AEM (à l’exception du composant HelloWorld de démonstration personnalisé). Il est recommandé de réutiliser autant de fonctionnalités des composants principaux que possible avant d’écrire du code personnalisé.

Examinez ensuite la page des composants principaux dans /libs/core/wcm/components/page/v2/page en utilisant CRXDE Lite :

Notez que de nombreux fichiers de script sont inclus sous cette page. La page des composants principaux contient de nombreuses fonctionnalités. Ces fonctionnalités sont divisées en plusieurs scripts pour faciliter la maintenance et la lisibilité. Vous pouvez suivre l’inclusion des scripts HTL en ouvrant page.html et en recherchant data-sly-include :

<!--/* /libs/core/wcm/components/page/v2/page/page.html */-->
<!DOCTYPE HTML>
<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
    data-sly-use.head="head.html"
    data-sly-use.footer="footer.html"
    data-sly-use.redirect="redirect.html">
    <head data-sly-call="${head.head @ page = page}"></head>
    <body class="${page.cssClassNames}"
        id="${page.id}"
        data-cmp-data-layer-enabled="${page.data ? true : false}">
        <script data-sly-test.dataLayerEnabled="${page.data}">
        window.adobeDataLayer = window.adobeDataLayer || [];
        adobeDataLayer.push({
            page: JSON.parse("${page.data.json @ context='scriptString'}"),
            event:'cmp:show',
            eventInfo: {
                path: 'page.${page.id @ context="scriptString"}'
            }
        });
        </script>
        <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
            data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
        <sly data-sly-test="${!isRedirectPage}">
            <sly data-sly-include="body.skiptomaincontent.html"></sly>
            <sly data-sly-include="body.socialmedia_begin.html"></sly>
            <sly data-sly-include="body.html"></sly>
            <sly data-sly-call="${footer.footer @ page = page}"></sly>
            <sly data-sly-include="body.socialmedia_end.html"></sly>
        </sly>
    </body>
</html>

L’autre raison pour laquelle diviser le langage HTL en plusieurs scripts est de permettre aux composants proxy de remplacer des scripts individuels pour implémenter une logique métier personnalisée. Les scripts HTL customfooterlibs.html et customheaderlibs.html sont créés dans le but explicite d’être remplacés par l’implémentation de projets.

Découvrez comment le modèle modifiable entre dans le rendu de la page de contenu en lisant cet article.

Examinez un autre composant principal, comme le chemin de navigation dans /libs/core/wcm/components/breadcrumb/v2/breadcrumb. Consultez le script breadcrumb.html pour comprendre comment le balisage du composant de chemin de navigation est généré.

Dans VSCode, ouvrez le projet aem-guides-wknd.

Développez le module ui.content dans l’explorateur de projets. Développez le dossier src et accédez à /conf/wknd/settings/wcm/templates.

Cliquez avec le bouton droit sur le dossier templates et sélectionnez Importer depuis le serveur AEM :

article-page doit être importé, et les modèles page-content et xf-web-variation doivent également être mis à jour.

Répétez les étapes pour importer du contenu, mais sélectionnez le dossier politiques depuis /conf/wknd/settings/wcm/policies.

Examinez le fichier filter.xml depuis ui.content/src/main/content/META-INF/vault/filter.xml.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/conf/wknd" mode="merge"/>
    <filter root="/content/wknd" mode="merge"/>
    <filter root="/content/dam/wknd" mode="merge"/>
    <filter root="/content/experience-fragments/wknd" mode="merge"/>
</workspaceFilter>

Le fichier filter.xml est chargé d’identifier les chemins d’accès des nœuds installés avec le package. Remarquez le mode="merge" sur chacun des filtres, cequi indique que le contenu existant ne doit pas être modifié et que seul un nouveau contenu peut être ajouté. Étant donné que les créateurs et créatrices de contenu peuvent mettre à jour ces chemins, il est important qu’un déploiement de code ne remplace aucun contenu. Voir la Documentation FileVault pour plus d’informations sur l’utilisation des éléments de filtre.

Comparez ui.content/src/main/content/META-INF/vault/filter.xml et ui.apps/src/main/content/META-INF/vault/filter.xml pour comprendre les différents nœuds gérés par chaque module.