DocumentationAEM 6.4Guide de Communities

Ajout de bibliothèques clientes add-clientlibs

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • User
CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

Ajout d’un dossier ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs

Création d’un dossier ClientLibraryFolder nommé clientlibsqui contiendra les éléments JS et CSS utilisés pour effectuer le rendu des pages de votre site.

Le categoriesLa valeur de propriété donné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. Utilisation CRXDE Lite, développer /etc/designs

  2. Clic droit sur an-scf-sandbox et sélectionnez Create Node

    • Nom : clientlibs
    • Type : cq:ClientLibraryFolder

  3. Cliquez sur OK

chlimage_1-220

Dans le Propriétés pour le nouvel onglet clientlibs , saisissez le categories property:

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

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

  1. Clic droit sur /etc/designs/an-scf-sandbox/clientlibs

  2. Sélectionner Créer un fichier…

  3. Entrée Nom: css.txt

  4. Sélectionner Créer un fichier…

  5. Entrée 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 se trouvent les listes de fichiers suivantes.

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 embed-scf-clientlibs

Dans le Propriétés pour la clientlibs , saisissez la propriété String à plusieurs valeurs. embed. Cela incorporera les bibliothèques côté client (clientlibs) pour les composants SCF. Pour ce tutoriel, nous allons ajouter de nombreuses clientlibs nécessaires aux composants Communities.

Remarque qu’il s’agit ou non de l’approche souhaitée à utiliser pour un site de production, car il y a des considérations pratiques par rapport à la taille/vitesse des clientlibs téléchargées pour chaque page.

Si vous utilisez une seule fonction sur une page, vous pouvez inclure la bibliothèque cliente complète de cette fonction directement sur la page, par exemple <% ui:includeClientLib categories=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 de création :

  • Nom : embed

  • Type : String

  • Cliquez sur Multi

  • Valeur : cq.social.scf

    <enter> s’affiche 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 include-clientlibs-in-playpage-template

Sans inclure la variable apps.an-scf-sandbox Dans la catégorie ClientLibraryFolder de la page, les composants SCF ne seront ni fonctionnels ni stylisés, car le ou les codes JavaScript et le ou les styles nécessaires 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 bibliothèques clientes apps.an-scf-sandbox incluses, le composant de commentaires SCF apparaît avec le style suivant :

chlimage_1-225

L’instruction d’inclusion appartient à la variable <head> de la section <html> script. La valeur par défaut foundation head.jsp inclut un script qui peut être superposé : headlibs.jsp.

Copiez headlibs.jsp et incluez clientlibs :

  1. Utilisation 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. Double-cliquez sur headlibs.jsp pour l’ouvrir

  6. Ajoutez 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" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
<% 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

Sauver votre travail jusqu'à présent saving-your-work-so-far

À ce stade, il existe un environnement de test minimaliste. Il peut être intéressant de l’enregistrer sous la forme d’un package. Ainsi, lors de la lecture, si votre référentiel est corrompu et que vous souhaitez recommencer, vous pouvez désactiver votre serveur, renommer ou supprimer le dossier crx-quickstart/, activer votre serveur, télécharger et installer ce package enregistré, sans avoir à répéter ces étapes les plus basiques.

Ce module existe sur la variable Création d’un exemple de page tutoriel pour ceux qui ne peuvent pas attendre d'entrer et de commencer à jouer !..

Pour créer un package :

  • De CRXDE Lite, cliquez sur le bouton Icône Package

  • Cliquez sur Créer un package

    • Nom du module: an-scf-sandbox-minimal-pkg
    • Version: 0.1
    • Groupe : <leave as="" default="">
    • Cliquez sur OK

  • Cliquez sur Modifier

    • Sélectionner Filtres tab

      • Cliquez sur Ajouter un filtre
      • Chemin racine : <browse to="" span="" id="0" translate="no" />>/apps/an-scf-sandbox
      • Cliquez sur Terminé
      • Cliquez sur Ajouter un filtre
      • Chemin racine : <browse to="" span="" id="0" translate="no" />>/etc/designs/an-scf-sandbox
      • Cliquez sur Terminé
      • Cliquez sur Ajouter un filtre
      • Chemin racine : <browse to="" span="" id="0" translate="no" />>/content/an-scf-sandbox
      • Cliquez sur Terminé

    • Cliquez sur Enregistrer

  • Cliquez sur Concevoir

Maintenant, vous pouvez sélectionner Télécharger pour l’enregistrer sur le disque et Télécharger le module ailleurs, puis sélectionnez Plus > Répliquer afin de pousser l’environnement de test vers une instance de publication localhost pour développer le domaine de votre environnement de test.

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6