DocumentazioneAEM 6.4Guida di Communities

Aggiungi clientlibs add-clientlibs

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • User
CAUTION
AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

Aggiungi una ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs

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

La categoriesil 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

chlimage_1-220

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

  • Nome: categorie
  • Tipo: Stringa
  • Valore: apps.an-scf-sandbox
  • Fai 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

chlimage_1-221

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 embed-scf-clientlibs

In Proprietà scheda per clientlibs node, immettere la proprietà String con più valori incorporare. Ciò incorporerà le librerie lato client (clientlibs) per componenti SCF. Per questa esercitazione verranno aggiunte molte delle clientlibs 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 direttamente sulla pagina la clientlib completa della funzione, ad esempio <% ui:includeClientLib categories=cq.social.hbs.forum" %>

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

  • Nome: embed

  • Tipo: String

  • Clic Multi

  • Valore: cq.social.scf

    <enter> apre 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

chlimage_1-222

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

chlimage_1-223

Includi clientlibs nel modello PlayPage include-clientlibs-in-playpage-template

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 appare senza stile:

chlimage_1-224

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

chlimage_1-225

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 selezionate 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. Fai doppio clic su 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.

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

chlimage_1-226

Salvataggio del lavoro finora eseguito saving-your-work-so-far

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 tuo server, rinominare o eliminare la cartella crx-quickstart/, accendere il tuo server, caricare e installare questo pacchetto salvato, e non dover ripetere questi passaggi 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: <browse to="" span="" id="0" translate="no" />>/apps/an-scf-sandbox
      • Fai clic su Fine
      • Fai clic su Aggiungi filtro
      • Percorso principale: <browse to="" span="" id="0" translate="no" />>/etc/designs/an-scf-sandbox
      • Fai clic su Fine
      • Fai clic su Aggiungi filtro
      • Percorso principale: <browse to="" span="" id="0" translate="no" />>/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.

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6