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.
-
Utilisation CRXDE Lite, développer
/etc/designs
-
Clic droit
an-scf-sandbox
et sélectionnezCreate Node
- Nom :
clientlibs
- Type :
cq:ClientLibraryFolder
- Nom :
-
Cliquez sur OK
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 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.tx
t et css.txt
fichiers . (Il ne s’agit pas officiellement d’un cq:ClientLibraryFolder sans ces éléments.)
- Clic droit
/etc/designs/an-scf-sandbox/clientlibs
- Sélectionner Créer un fichier…
- Entrée Nom :
css.txt
- Sélectionner Créer un fichier…
- Entrée Nom :
js.txt
- Cliquez sur Enregistrer tout
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 :
-
Nom :
embed
-
Type :
String
-
Cliquez sur
Multi
-
Valeur :
cq.social.scf
-
Une boîte de dialogue s’affiche, puis 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
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 :
-
Utilisation 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électionnez
/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
headlibs.jsp
pour l’ouvrir. -
Ajouter 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
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 :
-
Dans CRXDE Lite, cliquez sur le Icône Package
-
Cliquez sur Créer un module
- 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 : accédez à
/apps/an-scf-sandbox
- Cliquez sur Terminé
- Cliquez sur Ajouter un filtre
- Chemin racine : accédez à
/etc/designs/an-scf-sandbox
- Cliquez sur Terminé
- Cliquez sur Ajouter un filtre
- Chemin racine : accédez à
/content/an-scf-sandbox**
- Cliquez sur Terminé
-
Cliquez sur Enregistrer
-
-
Cliquez sur Build
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.