Lägg till klienter add-clientlibs

CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

Lägg till en ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs

Skapa en ClientLibraryFolder med namnet clientlibssom kommer att innehålla den JS och CSS som används för att återge platsens sidor.

The categoriesdet egenskapsvärde som anges för det här klientbiblioteket är den identifierare som används för att direkt ta med klienten från en innehållssida eller för att bädda in den i andra klienter.

  1. Använda CRXDE Lite, expandera /etc/designs

  2. Högerklicka på an-scf-sandbox och markera Create Node

    • Namn: clientlibs
    • Typ: cq:ClientLibraryFolder
  3. Klicka på OK

chlimage_1-220

I Properties för den nya clientlibs nod, ange categories egenskap:

  • Namn: categories
  • Typ: String
  • Värde: apps.an-scf-sandbox
  • Klicka på Add
  • Klicka på Save All

Obs! för att visa kategorivärdet med appar. är en konvention som identifierar att det ägande programmet finns i /apps-mappen, inte /libs. VIKTIGT! Lägg till platshållare js.txt och css.txt filer. (Det är inte officiellt en cq:ClientLibraryFolder utan dem.)

  1. Högerklicka på /etc/designs/an-scf-sandbox/clientlibs

  2. Välj Create File…

  3. Retur Name: css.txt

  4. Välj Create File…

  5. Retur Name: js.txt

  6. Klicka på Save All

chlimage_1-221

Den första raden i css.txt och js.txt identifierar den basplats från vilken följande fillistor ska hittas.

Försök att ange innehållet i css.txt till:

#base=.
 style.css

Skapa sedan en fil under clientlibs med namnet style.css och ställ in innehållet på:

body {

background-color: #b0c4de;

}

Bädda in SCF-klienter embed-scf-clientlibs

I Properties -fliken för clientlibs node, enter the multi-value String property embed. Detta bäddar in de nödvändiga klientbibliotek (klientlibs) för SCF-komponenter. I den här självstudiekursen ska vi lägga till många av de klientlibs som behövs för webbkomponenterna.

Anteckning att detta kan vara det önskade tillvägagångssättet för en produktionsplats, eftersom det finns praktiska överväganden jämfört med storleken/hastigheten för de klienter som laddas ned för varje sida.

Om du bara använder en funktion på en sida kan du inkludera den funktionens fullständiga klientlib direkt på sidan, t.ex. <% ui:includeClientLib categories=cq.social.hbs.forum" %>

I det här fallet tar vi med alla, och föredrar därför de mer grundläggande SCF-klientlibs som är författarens klientlibs:

  • Namn: embed

  • Typ: String

  • Klicka på Multi

  • Värde: cq.social.scf

    <enter> öppnar en dialogruta

    Klicka [+] ​efter varje post för att lägga till följande clientlib-kategorier:

    • 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
    • Klicka på OK
  • Klicka på Save All

chlimage_1-222

Så här är det /etc/designs/an-scf-sandbox/clientlibs ska nu visas i databasen:

chlimage_1-223

Inkludera klienter i PlayPage-mallen include-clientlibs-in-playpage-template

Utan att inkludera apps.an-scf-sandbox Kategorin ClientLibraryFolder på sidan. SCF-komponenterna kommer inte att fungera eller formateras eftersom de Javascript och format som behövs inte kommer att vara tillgängliga.

Utan att ta med clientlibs ser SCF-kommentarskomponenten till exempel formaterad ut:

chlimage_1-224

När clientlibs för apps.an-scf-sandbox ingår formateras SCF-kommentarskomponenten:

chlimage_1-225

Programsatsen include tillhör <head> i <html> skript. Standardvärdet foundation head.jsp innehåller ett skript som kan överlappas: headlibs.jsp.

Copy headlibs.jsp and include clientlibs:

  1. Använda CRXDE Lite, markera /libs/foundation/components/page/headlibs.jsp

  2. Högerklicka och välj Copy (eller välj Kopiera från verktygsfältet)

  3. Välj /apps/an-scf-sandbox/components/playpage

  4. Högerklicka och välj Paste (eller välj Klistra in i verktygsfältet)

  5. Dubbelklicka på headlibs.jsp för att öppna den

  6. Lägg till följande rad i slutet av filen

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

  7. Klicka på Save All

<%@ 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"/>

Läs in webbplatsen i webbläsaren och se om bakgrunden inte är en blå nyans.

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

chlimage_1-226

Spara ditt arbete hittills saving-your-work-so-far

Nu finns det en minimalistisk sandlåda, och det kan vara värt att spara som ett paket så att du, när du spelar upp, kan aktivera servern om din databas blir skadad och du vill börja om, stänga av servern, byta namn på eller ta bort mappen crx-quickstart/, aktivera servern, ladda upp och installera det här sparade paketet och inte behöver upprepa dessa mest grundläggande steg.

Det här paketet finns på Skapa en exempelsida självstudiekurs för dem som inte bara vill hoppa in och börja spela!..

Så här skapar du ett paket:

  • Från CRXDE Lite klickar du på Paketikon

  • Klicka på Create Package

    • Paketnamn: an-scf-sandbox-minimal-pkg
    • Version: 0.1
    • Grupp: <leave as="" default="">
    • Klicka på OK
  • Klicka på Edit

    • Välj Filters tab

      • Klicka på Add filter
      • Rotsökväg: <browse to="" span="" id="0" translate="no" />>/apps/an-scf-sandbox
      • Klicka på Done
      • Klicka på Add filter
      • Rotsökväg: <browse to="" span="" id="0" translate="no" />>/etc/designs/an-scf-sandbox
      • Klicka på Done
      • Klicka på Add filter
      • Rotsökväg: <browse to="" span="" id="0" translate="no" />>/content/an-scf-sandbox
      • Klicka på Done
    • Klicka på Save

  • Klicka på Build

Nu kan du välja Download för att spara den på disk och Upload Package andra, samt markera More > Replicate för att överföra sandlådan till en lokal värdpubliceringsinstans för att utöka sandlådans sfär.

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