Aggiungi Clientlibs

Aggiungere una ClientLibraryFolder (clientlibs)

Create una ClientLibraryFolder denominata clientlibsche conterrà i file JS e CSS utilizzati per il rendering delle pagine del sito.

Il valore della proprietà categoriesdata a questa libreria client è l'identificatore utilizzato per includere direttamente questa clientlib da una pagina di contenuto o per incorporarla in altri clientlibs.

  1. Utilizzando CRXDE Lite, espandere /etc/designs

  2. Fare clic con il pulsante destro del mouse su an-scf-sandbox e selezionare Create Node

    • Nome: clientlibs
    • Tipo: cq:ClientLibraryFolder
  3. Fai clic su OK

chlimage_1-220

Nella scheda Proprietà per il nuovo nodo clientlibs, immettere la proprietà categories:

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

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.txt e css.txt. (non è ufficialmente una cq:ClientLibraryFolder senza di esse.)

  1. Fare clic con il pulsante destro del mouse su /etc/designs/an-scf-sandbox/clientlibs

  2. Selezionare Crea file…

  3. Immettere Nome: css.txt

  4. Selezionare Crea file…

  5. Immettere Nome: js.txt

  6. Fare clic su Salva tutto

chlimage_1-221

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;

}

Incorpora client SCF

Nella scheda Proprietà del nodo clientlibs, immettere la proprietà String multi-valore embed. In questo modo verranno incorporate le librerie lato client (clientlibs) necessarie per i componenti SCF. Per questa esercitazione verranno 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 direttamente sulla pagina la clientlib completa di tale funzione, ad esempio, <% ui:includeClientLib category=cq.social.hbs.forum" %>

In questo caso, li includiamo tutti, e quindi preferiremmo i più basilari clientlibs SCF che sono gli autori clientlibs:

  • Nome: embed

  • Tipo: String

  • Clic Multi

  • Valore: cq.social.scf

    <enter> verrà visualizzata una finestra di dialogo

    Fate clic [+]​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
  • Fare clic su Salva tutto

chlimage_1-222

Questo è il modo in cui /etc/designs/an-scf-sandbox/clientlibs dovrebbe ora apparire nella directory archivio:

chlimage_1-223

Includi Clientlibs nel modello PlayPage

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 i clientlibs, il componente Commenti SCF appare privo di stile:

chlimage_1-224

Una volta inclusi i clientlibs apps.an-scf-sandbox, il componente dei commenti SCF appare formattato:

chlimage_1-225

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:

  1. Utilizzando CRXDE Lite, selezionare /libs/foundation/components/page/headlibs.jsp

  2. Fare clic con il pulsante destro del mouse e selezionare Copia (oppure selezionare Copia dalla barra degli strumenti)

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

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

  5. Fare doppio clic su headlibs.jsp per aprirlo

  6. Aggiungi la riga seguente alla fine del file

    <ui:includeClientLib categories="apps.an-scf-sandbox"/>

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

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

chlimage_1-226

Salvataggio del lavoro fino ad ora

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:

  • Da CRXDE Lite, fare clic sull'icona Pacchetto

  • Fare clic su Crea pacchetto

    • Nome pacchetto: an-scf-sandbox-minimal-pkg
    • Versione: 0.1
    • Gruppo: <lasciare come predefinito>
    • Fai clic su OK
  • Fai clic su Modifica

    • Selezionare la scheda Filtri

      • Fare clic su Aggiungi filtro
      • Percorso directory principale: <individuare /apps/an-scf-sandbox
      • Fare clic su Fine
      • Fare clic su Aggiungi filtro
      • Percorso directory principale: <individuare /etc/designs/an-scf-sandbox
      • Fare clic su Fine
      • Fare clic su Aggiungi filtro
      • Percorso directory principale: <individuare /content/an-scf-sandbox
      • Fare clic su Fine
    • 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.

In questa pagina

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now