Créez un dossier ClientLibraryFolder nommé clientlibs
qui contiendra les éléments JS et CSS utilisés pour le rendu des 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.
À l’aide de CRXDE Lite, développez /etc/designs
Cliquez avec le bouton droit de la souris sur an-scf-sandbox
et sélectionnez Create Node
clientlibs
cq:ClientLibraryFolder
Cliquez sur OK
Dans l'onglet Propriétés du nouveau noeud clientlibs
, saisissez la propriété categories :
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 : Ajoutez les fichiers js.tx
t et css.txt
d’espace réservé. (Il ne s’agit pas officiellement d’un cq:ClientLibraryFolder sans ces éléments.)
/etc/designs/an-scf-sandbox/clientlibs
css.txt
js.txt
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;
}
Dans l’onglet Propriétés 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.
Notez qu’il peut s’agir de l’approche souhaitée ou non pour un site de production, car il existe 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 :
Nom : embed
Type : String
Cliquez sur Multi
Valeur : cq.social.scf
Une boîte de dialogue s’affiche,
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 Enregistrer tout
Voici comment /etc/designs/an-scf-sandbox/clientlibs
doit maintenant apparaître dans le référentiel :
Sans inclure la catégorie apps.an-scf-sandbox
ClientLibraryFolder dans la page, les composants SCF ne seront ni fonctionnels ni stylisés, car le ou les codes JavaScript et le(s) style(s) nécessaires(s) ne seront 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 :
À l’aide de CRXDE Lite, sélectionnez /libs/foundation/components/page/headlibs.jsp
Cliquez avec le bouton droit et sélectionnez Copier (ou sélectionnez Copier dans la barre d’outils).
Sélectionner /apps/an-scf-sandbox/components/playpage
Cliquez avec le bouton droit et sélectionnez Coller (ou sélectionnez Coller dans la barre d’outils).
Double-cliquez sur headlibs.jsp
pour l’ouvrir.
Ajoutez la ligne suivante à la fin du fichier.
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
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.
https://localhost:4502/content/an-scf-sandbox/en/play.html
À ce stade, il existe un environnement de test minimaliste. Il peut être intéressant d’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 élémentaires.
Ce module se trouve dans le tutoriel Créer une page d’exemple pour ceux qui ne peuvent pas attendre d’entrer et de commencer la lecture…
Pour créer un package :
Dans le CRXDE Lite, cliquez sur Icône Package
Cliquez sur Créer un package
leave as default
Cliquez sur Modifier
Sélectionnez l’onglet Filtres
/apps/an-scf-sandbox
/etc/designs/an-scf-sandbox
/content/an-scf-sandbox**
Cliquez sur Enregistrer
Cliquez sur Build
Vous pouvez maintenant sélectionner Télécharger pour l’enregistrer sur le disque et Télécharger le package ailleurs, ainsi que sélectionner Plus > Répliquer afin de pousser l’environnement de test vers une instance de publication localhost pour étendre le domaine de votre environnement de test.