Show Menu
SUJETS×

Ajouter Clientlibs

Ajouter un dossier ClientLibraryFolder (clientlibs)

Créez un dossier ClientLibraryFolder nommé clientlibs qui contiendra les fichiers JS et CSS utilisés pour rendre les pages de votre site.
La valeur de categories 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 à d’autres bibliothèques clientes.
  1. Using CRXDE Lite , expand /etc/designs
  2. Cliquez avec le bouton droit an-scf-sandbox et sélectionnez Create Node
    • Nom : clientlibs
    • Type : cq:ClientLibraryFolder
  3. Cliquez sur OK
Dans l’onglet Propriétés du nouveau clientlibs noeud, saisissez la propriété du :
  • Nom : catégories
  • Type : Chaîne
  • Valeur : apps.an-scf-sandbox
  • Cliquez sur Ajouter
  • Cliquez sur Enregistrer tout
Remarque : la préface de la valeur de avec "apps". est une convention permettant d'identifier l'application propriétaire comme se trouvant dans le dossier /apps et non /libs. IMPORTANT : Ajouter balise d’emplacement js.tx t et css.txt fichiers. (Il ne s’agit pas officiellement d’un dossier cq:ClientLibraryFolder sans eux.)
  1. Right-click /etc/designs/an-scf-sandbox/clientlibs
  2. Sélectionner Créer un fichier...
  3. Enter Name: css.txt
  4. Sélectionner Créer un fichier...
  5. Enter Name: js.txt
  6. Cliquez sur Enregistrer tout
La première ligne des fichiers css.txt et js.txt identifie l’emplacement de base à partir duquel se trouve le de fichiers suivant.
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

Dans l’onglet Propriétés du clientlibs noeud, saisissez la propriété Chaîne à plusieurs valeurs incorporée . Cette opération intègre les bibliothèques côté client (clientlibs) nécessaires pour les composants SCF. Pour ce tutoriel, de nombreux clients nécessaires aux composants Communautés sont ajoutés.
Notez qu’il peut s’agir de l’approche souhaitée ou non pour un site de production, car il y a des considérations de commodité par rapport à la taille/vitesse des clients téléchargés pour chaque page.
Si vous n’utilisez qu’une seule fonction sur une page, vous pouvez inclure directement la bibliothèque cliente complète de cette fonction sur la page, par exemple :
% ui:includeClientLib categories=cq.social.hbs.forum" %
Dans ce cas, les clients SCF les plus basiques qui sont les clientlibs d’auteur sont préférés :
  • Nom : embed
  • Type : String
  • Cliquez sur Multi
  • Valeur: cq.social.scf
    • Il affiche une boîte de dialogue, cliquez + après chaque entrée pour ajouter le clientlib suivant :
      • 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 apparaître dans le référentiel :

Inclure les bibliothèques clientes dans le modèle PlayPage

Sans l’inclusion du apps.an-scf-sandbox ClientLibraryFolder sur la page, les composants SCF ne seront pas fonctionnels ni stylisés, car le(s) code(s) JavaScript(s) et le(s) style(s) nécessaire(s) ne seront pas disponibles.
Par exemple, sans inclure les clientlibs, le composant de commentaires SCF apparaît sans style :
Une fois les clients apps.an-scf-sandbox inclus, le composant de commentaires SCF s’affiche avec le style suivant :
L’instruction include appartient à la head section du 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. Using CRXDE Lite , select /libs/foundation/components/page/headlibs.jsp
  2. Cliquez avec le bouton droit de la souris 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 de la souris et sélectionnez Coller (ou choisissez Coller dans la barre d’outils).
  5. -cliquer headlibs.jsp pour l’ouvrir
  6. Ajouter 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 voyez si l’arrière-plan n’est pas bleu.

Sauver votre travail jusqu'à présent

A ce stade, il existe un sandbox minimaliste, et il peut être utile d'enregistrer sous forme de package pour que, lors de la lecture, si votre référentiel est corrompu et que vous souhaitez le , vous puissiez 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 de base.
Ce paquet existe dans le didacticiel Créer un exemple de page pour ceux qui ne peuvent pas attendre d'entrer et d' jouer!...
Pour créer un pack :
  • Dans CRXDE Lite, cliquez sur l’icône Package
  • Cliquez sur Créer un package
    • Nom du package : an-scf-sandbox-minimal-pkg
    • Version : 0.1
    • Groupe: leave as default
    • Cliquez sur OK
  • Cliquez sur Modifier
    • Sélectionner l’onglet de
      • Click Add filter
      • Chemin racine : naviguer vers /apps/an-scf-sandbox
      • Cliquez sur Terminé
      • Click Add filter
      • Chemin racine : naviguer vers /etc/designs/an-scf-sandbox
      • Cliquez sur Terminé
      • Click Add filter
      • Chemin racine : naviguer vers /content/an-scf-sandbox**
      • Cliquez sur Terminé
    • Cliquez sur Enregistrer
  • Click Build
Vous pouvez maintenant sélectionner Télécharger pour l’enregistrer sur le disque et Télécharger le package ailleurs, ainsi que Plus > Répliquer pour pousser le sandbox vers une instance de publication localhost afin d’étendre le domaine de votre sandbox.