Aggiungi Clientlibs

Aggiungere una ClientLibraryFolder (clientlibs)

Creare una ClientLibraryFolder denominata clientlibs che conterrà i file JS e CSS utilizzati per 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.

1. Utilizzo di CRXDE Lite, espandi /etc/designs

2. Clic con il pulsante destro 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 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.txt e css.txt file. (Non è ufficialmente un cq:ClientLibraryFolder senza di loro).

1. Clic con il pulsante destro /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. 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

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 questo tutorial vengono aggiunte molte delle clientlibs necessarie per i componenti 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 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, includendole tutte e quindi sono preferite 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
    • Fai clic su OK

• Clic Salva tutto

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

Includi clientlibs nel modello PlayPage

Senza includere apps.an-scf-sandbox Nella categoria ClientLibraryFolder della pagina, i componenti SCF non saranno funzionali né formattati in quanto i JavaScript e gli stili necessari non saranno 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:

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

2. Fai clic con il pulsante destro del mouse e seleziona (Copia negli Appunti) Copia (oppure 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 (Copia negli Appunti) Incolla (oppure seleziona Incolla dalla barra degli strumenti).

5. Doppio clic headlibs.jsp per aprirlo

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

7. 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

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

Questo pacchetto esiste in Crea una pagina di esempio tutorial per chi non vede l’ora di entrare e iniziare a giocare!..

Per creare un pacchetto:

• Da CRXDE Lite, fai clic su Icona pacchetto

• Clic Crea pacchetto

  • Nome pacchetto: an-scf-sandbox-minimal-pkg
  • Versione: 0.1
  • Gruppo: leave as default
  • Fai clic su 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

  • Fai clic su Salva

• Clic Genera

Ora puoi 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 il realm della sandbox.

Risorse Business.Adobe.com

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