Aggiungi clientlibs

Aggiungi una ClientLibraryFolder (clientlibs)

Crea una ClientLibraryFolder denominata clientlibs che conterrà i JS e CSS utilizzati per il rendering delle pagine del sito.

La categories il valore della proprietà dato a questa libreria client è l'identificatore utilizzato per includere direttamente questa clientlib da una pagina di contenuto o per incorporarla in altre clientlibs.

1. Utilizzo CRXDE Lite, espandi /etc/designs

2. Fai clic con il pulsante destro del mouse an-scf-sandbox e seleziona Create Node

   • Nome : clientlibs
   • Tipo : cq:ClientLibraryFolder

3. Fai clic su OK

In Proprietà scheda per il nuovo clientlibs , immetti categorie proprietà:

• Nome : categorie
• Tipo : Stringa
• Valore : apps.an-scf-sandbox
• Fate clic su Aggiungi
• Fai clic su Salva tutto

Nota : aggiunta in anteprima del valore delle categorie con 'apps'. è una convenzione per identificare l'applicazione proprietaria come presente nella cartella /apps, non /libs. IMPORTANTE : Aggiungi segnaposto js.txt e css.txt file. (Non è ufficialmente un cq:ClientLibraryFolder senza di loro.)

1. Fai clic con il pulsante destro del mouse /etc/designs/an-scf-sandbox/clientlibs
2. Seleziona Crea file…
3. Invio Nome: css.txt
4. Seleziona Crea file…
5. Invio Nome: js.txt
6. Fai clic su Salva tutto

La prima riga di css.txt e js.txt identifica la posizione di base da cui devono essere trovati i seguenti elenchi di file.

Prova a impostare il contenuto di css.txt su

#base=.
 style.css

Quindi crea un file sotto clientlibs denominato style.css e imposta il contenuto su

body {

background-color: #b0c4de;

}

Incorpora Clientlibs SCF

In Proprietà scheda per clientlibs node, immettere la proprietà String con più valori incorporare. Questo incorpora il necessario librerie lato client (clientlibs) per componenti SCF. Per questa esercitazione vengono aggiunte molte delle clientlib necessarie per i componenti di Communities.

Nota che questo potrebbe essere o meno l'approccio desiderato da utilizzare per un sito di produzione in quanto ci sono considerazioni di convenienza rispetto a dimensione/velocità dei clientlibs scaricati per ogni pagina.

Se utilizzi una sola funzione su una pagina, puoi includere la clientlib completa di quella funzione direttamente sulla pagina, ad esempio,

% ui:includeClientLib categories=cq.social.hbs.forum" %

In questo caso, includendoli tutti e così le clientlibs SCF più basilari che sono gli autori clientlibs sono preferite:

• Nome : embed

• Tipo : String

• Clic Multi

• Valore: cq.social.scf

  • Viene visualizzata 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
    • Fai clic su OK

• Fai clic su Salva tutto

Questo è come /etc/designs/an-scf-sandbox/clientlibs dovrebbe ora essere visualizzato nell’archivio :

Includi clientlibs nel modello PlayPage

Senza includere apps.an-scf-sandbox Categoria ClientLibraryFolder nella pagina, i componenti SCF non saranno funzionali né formattati in quanto i JavaScript e gli stili necessari non saranno disponibili.

Ad esempio, senza includere le clientlibs, il componente commenti SCF viene visualizzato senza stile :

Una volta incluse le clientlibs di apps.an-scf-sandbox, il componente dei commenti SCF appare formattato :

L’istruzione "include" appartiene alla head della sezione html script. Il valore predefinito foundation head.jsp include uno script che può essere sovrapposto : headlibs.jsp.

Copia headlibs.jsp e includi clientlibs:

1. Utilizzo CRXDE Lite, seleziona /libs/foundation/components/page/headlibs.jsp

2. Fai clic con il pulsante destro del mouse e seleziona Copia (o seleziona Copia dalla barra degli strumenti)

3. Seleziona /apps/an-scf-sandbox/components/playpage

4. Fai clic con il pulsante destro del mouse e seleziona Incolla (oppure seleziona Incolla dalla barra degli strumenti)

5. Fare doppio clic headlibs.jsp per aprirlo

6. Aggiungi la riga seguente alla fine del file
   <ui:includeClientLib categories="apps.an-scf-sandbox"/>

7. Fai clic su 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 controlla se lo sfondo non è un'ombra di blu.

https://localhost:4502/content/an-scf-sandbox/en/play.html

Salvataggio del lavoro finora eseguito

A questo punto, esiste una sandbox minimalista e potrebbe essere utile salvarla come pacchetto in modo che, durante la riproduzione, se il tuo archivio diventa danneggiato e desideri ricominciare da capo, puoi spegnere il server, rinominare o eliminare la cartella crx-quickstart/, accendere il server, caricare e installare questo pacchetto salvato, e non dover ripetere questi passaggi più fondamentali.

Questo pacchetto esiste nel Creare una pagina di esempio tutorial per coloro che non vedono l'ora di saltare e iniziare a giocare!..

Per creare un pacchetto:

• Da CRXDE Lite, fai clic su Icona del pacchetto

• Fai clic su Crea pacchetto

  • Nome pacchetto: an-scf-sandbox-minimal-pkg
  • Versione: 0,1
  • Gruppo: leave as default
  • Fai clic su OK

• Fai clic su Modifica

  • Seleziona Filtri scheda

    • Fai clic su Aggiungi filtro
    • Percorso principale: naviga a /apps/an-scf-sandbox
    • Fai clic su Fine
    • Fai clic su Aggiungi filtro
    • Percorso principale: naviga a /etc/designs/an-scf-sandbox
    • Fai clic su Fine
    • Fai clic su Aggiungi filtro
    • Percorso principale: naviga a /content/an-scf-sandbox**
    • Fai clic su Fine

  • Fai clic su Salva

• Fai clic su Crea

Ora è possibile selezionare Scarica per salvarlo su disco e Carica pacchetto altrove, e selezionare Altro > Replica per spingere la sandbox a un'istanza di pubblicazione localhost per espandere il regno della sandbox.

Risorse Business.Adobe.com

Personalized Experiences Embedded Charts Responsive Forms Managed Cloud Headless Cms Digital Asset Management