Ajout de bibliothèques clientes add-clientlibs

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

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

La variable categories La 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.

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

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 : 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.)

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 le Propriétés pour la variable clientlibs , saisissez la propriété String à plusieurs valeurs. embed. Cela incorpore les bibliothèques côté client (clientlibs) 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 variable apps.an-scf-sandbox Catégorie ClientLibraryFolder sur la page, les composants SCF ne sont pas fonctionnels ni mis en forme, 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 variable head de la html script. 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 sur la variable Création d’un exemple de page tutoriel à l’intention des personnes qui ne peuvent pas attendre d’accéder à et de commencer à lire.

Pour créer un package :

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 pour envoyer l’environnement de test vers une instance de publication localhost afin de développer le domaine de votre environnement de test.