Ajout de bibliothèques clientes add-clientlibs

Ajouter un dossier ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs

Créez un dossier ClientLibraryFolder nommé clientlibs qui contient les feuilles JavaScript (JS) et CSS (Cascading Styles Sheets) utilisées pour générer les pages de votre site.

La valeur de propriété categories 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.

Dans l’onglet Properties du nouveau noeud clientlibs, saisissez la propriété categories :

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

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 et définissez le contenu sur

body {

background-color: #b0c4de;

}

Incorporer les bibliothèques clientes SCF embed-scf-clientlibs

Dans l’onglet Properties du noeud clientlibs, saisissez la propriété String à plusieurs valeurs embed. Cela incorpore les bibliothèques côté client (clientlibs) nécessaires pour les composants SCF. Pour ce tutoriel, de nombreuses clientlibs nécessaires aux composants Communities sont ajoutées.

Il peut s’agir de l’approche souhaitée 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, incluez-les toutes et ainsi, les clientlibs SCF les plus basiques qui sont les clientlibs de création sont préférées :

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

Inclure les bibliothèques clientes dans le modèle PlayPage include-clientlibs-in-playpage-template

Sans inclure la catégorie apps.an-scf-sandbox ClientLibraryFolder sur la page, les composants SCF ne sont pas fonctionnels ni stylisés, car les styles JavaScript et CSS nécessaires ne sont pas disponibles.

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

Une fois les bibliothèques clientes apps.an-scf-sandbox incluses, le composant de commentaires SCF apparaît avec le style suivant :

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

Copiez headlibs.jsp et incluez clientlibs :

<%@ 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.

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

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

À ce stade, il existe un environnement de test minimaliste. Il peut être utile d’enregistrer en tant que package afin que, lors de la lecture, si votre référentiel est corrompu et que vous souhaitez recommencer, vous puissiez désactiver votre serveur. Renommez ou supprimez ensuite le dossier crx-quickstart/, activez votre serveur, téléchargez et installez ce package enregistré, sans avoir à répéter ces étapes les plus élémentaires.

Ce module existe dans le tutoriel Créer une page d’exemple pour ceux qui ne peuvent pas attendre d’y accéder pour commencer la lecture.

Pour créer un package :

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