Ajouter les bibliothèques clientes

Ajouter un dossier ClientLibraryFolder (clientlibs)

Créez un dossier ClientLibraryFolder nommé clientlibsqui contiendra les fichiers JS et CSS utilisés pour générer les pages de votre site.

La valeur de propriété categoriesattribuée à cette bibliothèque cliente est l'identifiant utilisé pour inclure directement cette bibliothèque cliente à partir d'une page de contenu ou pour l'incorporer dans d'autres bibliothèques clientes.

  1. En utilisant CRXDE Lite, développez /etc/designs

  2. Cliquez avec le bouton droit sur an-scf-sandbox et sélectionnez Create Node

    • Nom : clientlibs
    • Type : cq:ClientLibraryFolder
  3. Cliquez sur OK

chlimage_1-220

Dans l'onglet Propriétés du nouveau noeud clientlibs, saisissez la propriété categories :

  • Nom :catégories
  • Type :chaîne
  • Valeur : apps.an-scf-sandbox
  • Cliquez sur Ajouter
  • Cliquez sur Enregistrer tout

Remarque : la préface de la valeur catégories avec "applications". est une convention permettant d'identifier l'application propriétaire comme se trouvant dans le dossier /apps et non /libs. IMPORTANT : Ajoutez les fichiers d’espace réservé js.txt et css.txt. (Il ne s’agit pas officiellement d’un cq:ClientLibraryFolder sans eux.)

  1. Cliquez avec le bouton droit sur /etc/designs/an-scf-sandbox/clientlibs

  2. Sélectionnez Créer un fichier…

  3. Saisissez Nom : css.txt

  4. Sélectionnez Créer un fichier…

  5. Saisissez Nom : js.txt

  6. Cliquez sur Enregistrer tout

chlimage_1-221

La première ligne des fichiers css.txt et js.txt identifie l’emplacement de base à partir duquel les listes de fichiers suivantes doivent être trouvées.

Essayez de définir le contenu de css.txt sur :

#base=.
 style.css

Créez ensuite un fichier sous clientlibs nommé style.css, puis définissez le contenu sur :

body {

background-color: #b0c4de;

}

Incorporer les bibliothèques clientes SCF

Dans l'onglet Propriétés du noeud clientlibs, saisissez la propriété String à plusieurs valeurs embed. Cela incorporera les bibliothèques côté client (clientlibs) nécessaires pour les composants SCF. Pour ce tutoriel, nous allons ajouter plusieurs clientlibs nécessaires pour les composants Communautés.

Il convient de noter que cette approche peut ou non être souhaitée pour un site de production car il y a des considérations de commodité par rapport à la taille/vitesse des clientlibs téléchargés pour chaque page.

Si vous n'utilisez qu'une seule fonction sur une page, vous pouvez inclure directement la bibliothèque cliente complète de cette fonction sur la page, par exemple <% ui:includeClientLib catégories=cq.social.hbs.forum" %>

Dans ce cas, nous les incluons tous, et nous préférerions donc les clientlibs SCF les plus basiques qui sont les clientlibs d'auteur :

  • Nom : embed

  • Type : String

  • Cliquez sur Multi

  • Valeur : cq.social.scf

    <enter> apparaîtra dans une boîte de dialogue

    Cliquez sur [+]​après chaque entrée pour ajouter les catégories clientlib suivantes :

    • cq.ckeditor
    • cq.social.author.hbs.comments
    • cq.social.author.hbs.forum
    • cq.social.author.hbs.rating
    • cq.social.author.hbs.reviews
    • cq.social.author.hbs.voting
    • Cliquez sur OK
  • Cliquez sur Enregistrer tout

chlimage_1-222

Voici comment /etc/designs/an-scf-sandbox/clientlibs doit maintenant apparaître dans le référentiel :

chlimage_1-223

Inclure les bibliothèques clientes dans le modèle PlayPage

Sans inclure la catégorie apps.an-scf-sandbox ClientLibraryFolder sur la page, les composants SCF ne seront pas fonctionnels ni stylisés, car le(s) code(s) JavaScript et le(s) style(s) nécessaire(s) ne seront pas disponibles.

Par exemple, sans inclure les clientlibs, le composant de commentaires SCF apparaît sans style :

chlimage_1-224

Une fois les clientlibs apps.an-scf-sandbox inclus, le composant de commentaires SCF s’affiche avec le style suivant :

chlimage_1-225

L'instruction include appartient à la section <head> du script <html>. Le script par défaut foundation head.jsp comprend un script qui peut être superposé : headlibs.jsp.

Copiez headlibs.jsp et incluez clientlibs :

  1. En utilisant CRXDE Lite, sélectionnez /libs/foundation/components/page/headlibs.jsp

  2. Cliquez avec le bouton droit et sélectionnez Copier (ou sélectionnez Copier dans la barre d'outils).

  3. Sélectionner /apps/an-scf-sandbox/components/playpage

  4. Cliquez avec le bouton droit et sélectionnez Coller (ou sélectionnez Coller dans la barre d'outils).

  5. Cliquez sur headlibs.jsp doublon pour l'ouvrir.

  6. Ajouter la ligne suivante à la fin du fichier

    <ui:includeClientLib categories="apps.an-scf-sandbox"/>

  7. Cliquez sur Enregistrer tout

<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp?lang=fr" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp?lang=fr"/>
<% currentDesign.writeCssIncludes(pageContext); %>
<ui:includeClientLib categories="apps.an-scf-sandbox"/>

Chargez votre site Web dans le navigateur et vérifiez si l’arrière-plan n’est pas bleu.

http://localhost:4502/content/an-scf-sandbox/en/play.html

chlimage_1-226

Sauvegarder votre travail jusqu'à présent

A ce stade, il existe un sandbox minimaliste, et il peut être utile d'enregistrer sous forme de package pour que, lors de la lecture, si votre référentiel est corrompu et que vous souhaitez le début, vous puissiez désactiver votre serveur, renommer ou supprimer le dossier crx-quickstart/, activer votre serveur, télécharger et installer ce package enregistré, et ne pas avoir à répéter ces étapes les plus basiques.

Ce package existe sur le didacticiel Créer un exemple de page pour ceux qui ne peuvent pas attendre d'entrer et de jouer à début !..

Pour créer un pack :

  • Dans CRXDE Lite, cliquez sur l’icône Package

  • Cliquez sur Créer un package

    • Nom du module: an-scf-sandbox-minimal-pkg
    • Version: 0.1
    • Groupe : <laisser comme valeur par défaut>
    • Cliquez sur OK
  • Cliquez sur Modifier

    • Sélectionner Filtres onglet

      • Cliquez sur Ajouter le filtre
      • Chemin racine : <accédez à <a0/"/apps/an-scf-sandbox
      • Cliquez sur Terminé
      • Cliquez sur Ajouter le filtre
      • Chemin racine : <accédez à <a0/"/etc/designs/an-scf-sandbox
      • Cliquez sur Terminé
      • Cliquez sur Ajouter le filtre
      • Chemin racine : <accédez à <a0/"/content/an-scf-sandbox
      • Cliquez sur Terminé
    • Cliquez sur Enregistrer

  • Cliquez sur Créer

Vous pouvez désormais sélectionner Télécharger pour l’enregistrer sur le disque et Télécharger le package ailleurs, ainsi que Plus > Répliquer pour pousser le sandbox vers une instance de publication hôte local afin de développer le domaine de votre sandbox.

Sur cette page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now