Create una ClientLibraryFolder denominata clientlibs
che conterrà i file JS e CSS utilizzati per il rendering delle pagine del sito.
Il valore della proprietà categories
assegnato a questa libreria client è l'identificatore utilizzato per includere direttamente questa clientlib da una pagina di contenuto o per incorporarla in altri clientlibs.
Utilizzando CRXDE Lite, espandere /etc/designs
Fare clic con il pulsante destro del mouse su an-scf-sandbox
e selezionare Create Node
clientlibs
cq:ClientLibraryFolder
Fai clic su OK
Nella scheda Proprietà per il nuovo nodo clientlibs
, immettere la proprietà Categories:
Nota: visualizzazione in anteprima del valore delle categorie con 'app'. è una convenzione per identificare l'applicazione proprietaria come nella cartella /apps, non /libs. IMPORTANTE: Aggiungere file segnaposto js.tx
t e css.txt
. (non è ufficialmente una cq:ClientLibraryFolder senza di esse.)
/etc/designs/an-scf-sandbox/clientlibs
css.txt
js.txt
La prima riga di css.txt e js.txt identifica la posizione di base dalla quale si trovano i seguenti elenchi di file.
Provate a impostare il contenuto di css.txt su
#base=.
style.css
Quindi create un file in clientlibs denominato style.css e impostate il contenuto su
body {
background-color: #b0c4de;
}
Nella scheda Proprietà del nodo clientlibs
, immettere la proprietà String multi-valore embed. Questo incorpora le librerie lato client (clientlibs) necessarie per i componenti SCF. Per questa esercitazione vengono aggiunti molti dei clientlibs necessari per i componenti Community.
Si noti che questo potrebbe essere o meno l'approccio desiderato da utilizzare per un sito di produzione, in quanto vi sono considerazioni di convenienza rispetto alla dimensione/velocità dei clientlibs scaricati per ogni pagina.
Se si utilizza una sola funzione su una pagina, è possibile includere la clientlib completa di tale funzione direttamente sulla pagina, ad esempio,
% ui:includeClientLib categories=cq.social.hbs.forum" %
In questo caso, includendo tutti e così i clienti SCF più basilari che sono gli autori clientlibé sono preferite:
Nome : embed
Tipo : String
Clic Multi
Valore: cq.social.scf
Viene visualizzata una finestra di dialogo,
fare clic su +
dopo ogni voce per aggiungere le seguenti categorie clientlib:
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
Fare clic su Salva tutto
Questo è il modo in cui /etc/designs/an-scf-sandbox/clientlibs
dovrebbe ora apparire nella directory archivio:
Senza includere la categoria apps.an-scf-sandbox
ClientLibraryFolder nella pagina, i componenti SCF non funzioneranno né saranno formattati in quanto non saranno disponibili i JavaScript e gli stili necessari.
Ad esempio, senza includere clientlibs, il componente commenti SCF non ha lo stile :
Una volta inclusi i clientlibs apps.an-scf-sandbox, il componente dei commenti SCF appare formattato :
L'istruzione include appartiene alla sezione head
dello script html
. L'elemento foundation head.jsp
predefinito include uno script che può essere sovrapposto : headlibs.jsp
.
Copiate headlibs.jsp e includete clientlibs:
Utilizzando CRXDE Lite, selezionare /libs/foundation/components/page/headlibs.jsp
Fare clic con il pulsante destro del mouse e selezionare Copia (oppure selezionare Copia dalla barra degli strumenti)
Seleziona /apps/an-scf-sandbox/components/playpage
Fare clic con il pulsante destro del mouse e selezionare Incolla (oppure selezionare Incolla dalla barra degli strumenti)
Fare doppio clic su headlibs.jsp
per aprirlo
Aggiungi la riga seguente alla fine del file
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
Fare clic su Salva tutto
<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp?lang=it" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp?lang=it"/>
<% currentDesign.writeCssIncludes(pageContext); %>
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
Caricate il sito Web nel browser e verificate se lo sfondo non è blu.
https://localhost:4502/content/an-scf-sandbox/en/play.html
A questo punto, esiste una sandbox minimalista, e potrebbe essere utile salvarla come pacchetto in modo che, durante la riproduzione, se il repository diventa danneggiato e si desidera ricominciare, è possibile spegnere il server, rinominare o eliminare la cartella crx-quickstart/, attivare il server, caricare e installare questo pacchetto salvato, e non dover ripetere questi passaggi fondamentali.
Questo pacchetto è disponibile nell'esercitazione Create a Sample Page per coloro che non possono aspettare di passare a un'azione e iniziare la riproduzione!..
Per creare un pacchetto:
Dal CRXDE Lite fate clic sull'icona Pacchetto
Fare clic su Crea pacchetto
leave as default
Fai clic su Modifica
Selezionare la scheda Filtri
/apps/an-scf-sandbox
/etc/designs/an-scf-sandbox
/content/an-scf-sandbox**
Fai clic su Salva
Fare clic su Build
Ora potete selezionare Scarica per salvarlo su disco e Carica pacchetto altrove, nonché selezionare Altro > Replica per inviare la sandbox a un'istanza di pubblicazione localhost per espandere l'area di autenticazione della sandbox.