Aggiungi Clientlibs add-clientlibs
Aggiungere una ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs
Creare una ClientLibraryFolder denominata clientlibs
che contiene JavaScript (JS) e Cascading Styles Sheets (CSS) utilizzati per eseguire il rendering delle pagine del sito.
Il categories
il valore della proprietà assegnato a questa libreria client è l’identificatore utilizzato per includere direttamente questa libreria client da una pagina di contenuto o per incorporarla in altre librerie client.
-
Utilizzo di CRXDE Liti, espandi
/etc/designs
-
Clic con il pulsante destro
an-scf-sandbox
e selezionaCreate Node
- Nome :
clientlibs
- Tipo :
cq:ClientLibraryFolder
- Nome :
-
Clic OK
In Proprietà scheda per il nuovo clientlibs
, immetti il categorie proprietà:
- Nome : categorie
- Tipo : Stringa
- Valore : apps.an-scf-sandbox
- Clic Aggiungi
- Clic Salva tutto
Nota: anteprima del valore delle categorie con "apps". è una convenzione per identificare l’applicazione proprietaria come presente nella cartella /apps, non in /libs. IMPORTANTE: aggiungere un segnaposto js.tx
t e css.txt
file. (Non è ufficialmente un cq:ClientLibraryFolder senza di loro).
- Clic con il pulsante destro
/etc/designs/an-scf-sandbox/clientlibs
- Seleziona Crea file…
- Invio Nome:
css.txt
- Seleziona Crea file…
- Invio Nome:
js.txt
- Clic Salva tutto
La prima riga dei file css.txt e js.txt identifica la posizione di base da cui si trovano i seguenti elenchi di file.
Prova a impostare il contenuto di css.txt su
#base=.
style.css
Quindi crea un file in clientlibs denominato style.css e imposta il contenuto su
body {
background-color: #b0c4de;
}
Incorpora librerie client SCF embed-scf-clientlibs
In Proprietà scheda per clientlibs
, immettere la proprietà String con più valori incorporare. Ciò incorpora le librerie lato client (clientlibs) per i componenti SCF. Per questa esercitazione, vengono aggiunte molte delle clientlibs necessarie per i componenti Community.
Questo potrebbe essere o meno l'approccio desiderato da utilizzare per un sito di produzione, in quanto ci sono considerazioni di convenienza rispetto alle dimensioni/velocità delle clientlibs scaricate per ogni pagina.
Se utilizzi una sola funzione su una pagina, puoi includere la libreria client completa della funzione direttamente sulla pagina, ad esempio,
% ui:includeClientLib categories=cq.social.hbs.forum" %
In questo caso, includendoli tutti e quindi si preferiscono le clientlibs SCF di base che sono le clientlibs dell’autore:
-
Nome :
embed
-
Tipo :
String
-
Clic
Multi
-
Valore:
cq.social.scf
-
Apparirà una finestra di dialogo, fai 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
- Clic OK
-
-
Clic Salva tutto
Ecco come /etc/designs/an-scf-sandbox/clientlibs
dovrebbe ora essere visualizzato nell’archivio :
Includi clientlibs nel modello PlayPage include-clientlibs-in-playpage-template
Senza includere apps.an-scf-sandbox
Categoria ClientLibraryFolder sulla pagina, i componenti SCF non sono funzionali né formattati in quanto gli stili JavaScript e CSS necessari non sono disponibili.
Ad esempio, senza includere clientlibs, il componente SCF comments (commenti SCF) non viene formattato:
Una volta incluse le clientlibs apps.an-scf-sandbox, il componente commenti SCF appare con lo stile:
L'istruzione "include" appartiene al head
sezione del html
script. Il valore predefinito foundation head.jsp
include uno script che può essere sovrapposto: headlibs.jsp
.
Copia headlibs.jsp e includi clientlibs:
-
Utilizzo di CRXDE Liti, seleziona
/libs/foundation/components/page/headlibs.jsp
-
Fai clic con il pulsante destro del mouse e seleziona (Copia negli Appunti) Copia (oppure seleziona Copia dalla barra degli strumenti).
-
Seleziona
/apps/an-scf-sandbox/components/playpage
-
Fai clic con il pulsante destro del mouse e seleziona (Copia negli Appunti) Incolla (oppure seleziona Incolla dalla barra degli strumenti).
-
Doppio clic
headlibs.jsp
in modo da poterlo aprire -
Aggiungi la riga seguente alla fine del file
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
-
Clic Salva tutto
<%@ 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"/>
Carica il tuo sito web nel browser e osserva se lo sfondo non è una tonalità di blu.
https://localhost:4502/content/an-scf-sandbox/en/play.html
Salvataggio del lavoro saving-your-work-so-far
A questo punto, esiste una sandbox minimalista. Potrebbe essere utile salvarlo come pacchetto in modo che, durante la riproduzione, se l’archivio diventa danneggiato e desideri ricominciare, puoi spegnere il server. Quindi rinomina o elimina la cartella crx-quickstart/, accendi il server, carica e installa questo pacchetto salvato e non devi ripetere questi passaggi più semplici.
Questo pacchetto esiste in Crea una pagina di esempio tutorial per coloro che non vedono l’ora di entrare e iniziare a giocare.
Per creare un pacchetto:
-
Da CRXDE Liti, fai clic su Icona pacchetto
-
Clic Crea pacchetto
- Nome pacchetto: an-scf-sandbox-minimal-pkg
- Versione: 0.1
- Gruppo:
leave as default
- Clic OK
-
Clic Modifica
-
Seleziona Filtri scheda
- Clic Aggiungi filtro
- Percorso principale: vai a
/apps/an-scf-sandbox
- Clic Fine
- Clic Aggiungi filtro
- Percorso principale: vai a
/etc/designs/an-scf-sandbox
- Clic Fine
- Clic Aggiungi filtro
- Percorso principale: vai a
/content/an-scf-sandbox**
- Clic Fine
-
Clic Salva
-
-
Clic Genera
Ora puoi selezionare Scarica per salvarlo su disco e Carica pacchetto altrove e seleziona Altro > Replica per inviare la sandbox a un’istanza di pubblicazione localhost per espandere il realm della sandbox.