Aggiungi Clientlibs

Aggiungere una ClientLibraryFolder (clientlibs)

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.

  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

add-client-library

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

clientlibs-css

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. 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
      • Fai clic su OK
  • Fare clic su Salva tutto

scf-clientlibs

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

scf-clientlibs-view

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 clientlibs, il componente commenti SCF non ha lo stile :

clientlibs-comment

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

clientlibs-comment-styled

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.

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

gioco di comunità

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:

  • Dal CRXDE Lite fate clic sull'icona Pacchetto

  • Fare 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

    • 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 Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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