DocumentatieAEM 6.4Handleiding Communities

Clientlibs toevoegen add-clientlibs

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

Gemaakt voor:

  • User
CAUTION
AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

Een ClientLibraryFolder (clientlibs) toevoegen add-a-clientlibraryfolder-clientlibs

Een ClientLibraryFolder maken met de naam clientlibsdie de JS en CSS bevat die worden gebruikt om de pagina's van uw site weer te geven.

De categoriesDe eigenschapwaarde die aan deze clientbibliotheek wordt gegeven, is de id die wordt gebruikt om deze clientlib rechtstreeks vanaf een inhoudspagina in te sluiten of om deze in andere clientlibs in te sluiten.

  1. Gebruiken CRXDE Lite, uitbreiden /etc/designs

  2. Rechtsklik ingeschakeld an-scf-sandbox en selecteert u Create Node

    • Naam: clientlibs
    • Type: cq:ClientLibraryFolder

  3. Klik op OK

chlimage_1-220

In de Properties tab voor de nieuwe clientlibs knoop, ga in categories eigenschap:

  • Naam: categories
  • Type: String
  • Waarde: apps.an-scf-sandbox
  • Klik op Add
  • Klik op Save All

Opmerking: De waarde voor categorieën wordt voorafgegaan door 'apps'. is een conventie om aan te geven dat de 'toepassing die eigenaar is' zich in de map /apps bevindt, niet /libs. BELANGRIJK: Plaatsaanduiding toevoegen js.txt en css.txt bestanden. (Het is officieel geen cq:ClientLibraryFolder zonder hen.)

  1. Rechtsklik ingeschakeld /etc/designs/an-scf-sandbox/clientlibs

  2. Selecteer Create File…

  3. Enter Name: css.txt

  4. Selecteer Create File…

  5. Enter Name: js.txt

  6. Klik op Save All

chlimage_1-221

De eerste regel van css.txt en js.txt identificeert de basislocatie van waaruit de volgende lijsten met bestanden moeten worden gevonden.

Stel de inhoud van css.txt in op:

#base=.
 style.css

Maak vervolgens een bestand onder clientlibs met de naam style.css en stel de inhoud in op:

body {

background-color: #b0c4de;

}

SCF-clips insluiten embed-scf-clientlibs

In de Properties tab voor de clientlibs node, voer de eigenschap String voor meerdere waarden in embed. Hierdoor worden de noodzakelijke client-side bibliotheken (clientlibs) voor SCF-componenten. Voor deze zelfstudie zullen we veel clientlibs toevoegen die nodig zijn voor de onderdelen van de Gemeenschappen.

Opmerking dat dit al dan niet de gewenste benadering voor een productiesite kan zijn aangezien er overwegingen van gemak tegenover grootte/snelheid van de clientlibs die voor elke pagina worden gedownload zijn.

Als u slechts één functie op één pagina gebruikt, kunt u de volledige clientlib van die functie rechtstreeks op de pagina opnemen, bijvoorbeeld <% ui:includeClientLib categorieën=cq.social.hbs.forum" %>

In dit geval, sluiten wij hen allen, en zo zouden de eenvoudigere SCF clientlibs verkiezen die de auteur clientlibs zijn:

  • Naam: embed

  • Type: String

  • Klik op Multi

  • Waarde: cq.social.scf

    <enter> pop-up van dialoogvenster

    Klikken [+] ​na elke vermelding om de volgende clientlib-categorieën toe te voegen:

    • 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
    • Klik op OK

  • Klik op Save All

chlimage_1-222

Zo /etc/designs/an-scf-sandbox/clientlibs moet nu worden weergegeven in de gegevensopslagruimte:

chlimage_1-223

Clientlibs opnemen in PlayPage-sjabloon include-clientlibs-in-playpage-template

Zonder de apps.an-scf-sandbox De categorie ClientLibraryFolder op de pagina, de SCF-componenten zijn niet functioneel en niet opgemaakt omdat de benodigde Javascript(s) en stijl(en) niet beschikbaar zijn.

Bijvoorbeeld, zonder de clientlibs op te nemen, lijkt de SCF commentaarcomponent ongestileerd:

chlimage_1-224

Zodra apps.an-scf-sandbox clientlibs is opgenomen, wordt de SCF-commentaarcomponent vormgegeven:

chlimage_1-225

De instructie include behoort tot de <head> van de <html> script. De standaardwaarde foundation head.jsp bevat een script dat kan worden bedekt: headlibs.jsp.

Kopieer koplibs.jsp en neem clientlibs op:

  1. Gebruiken CRXDE Lite, selecteert u /libs/foundation/components/page/headlibs.jsp

  2. Klikken met rechtermuisknop en selecteren Copy (of selecteer Kopiëren in de werkbalk)

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

  4. Klikken met rechtermuisknop en selecteren Paste (of selecteer Plakken in de werkbalk)

  5. Dubbelklikken op headlibs.jsp openen

  6. De volgende regel toevoegen aan het einde van het bestand

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

  7. Klik op 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"/>

Laad uw website in de browser en controleer of de achtergrond geen blauwe tint heeft.

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

chlimage_1-226

Uw werk tot nu toe opslaan saving-your-work-so-far

Op dit moment bestaat er een minimalistische sandbox en het kan de moeite waard zijn om op te slaan als een pakket, zodat u tijdens het afspelen, als uw reactie beschadigd raakt en u opnieuw wilt beginnen, de server kunt uitschakelen, de naam van de map crx-quickstart/ wijzigen of verwijderen, de server in kunt schakelen, uploaden en installeren van dit opgeslagen pakket en deze basisstappen niet hoeft te herhalen.

Dit pakket is beschikbaar op het tabblad Een voorbeeldpagina maken zelfstudie voor hen die niet kunnen wachten om gewoon binnen te springen en te beginnen met afspelen…

Een pakket maken:

  • Van CRXDE Lite klikt u op de knop Pakketpictogram

  • Klik op Create Package

    • Pakketnaam: an-scf-sandbox-minimal-pkg
    • Versie: 0.1
    • Groep: <leave as="" default="">
    • Klik op OK

  • Klik op Edit

    • Selecteren Filters tab

      • Klik op Add filter
      • Hoofdpad: <browse to="" span="" id="0" translate="no" />>/apps/an-scf-sandbox
      • Klik op Done
      • Klik op Add filter
      • Hoofdpad: <browse to="" span="" id="0" translate="no" />>/etc/designs/an-scf-sandbox
      • Klik op Done
      • Klik op Add filter
      • Hoofdpad: <browse to="" span="" id="0" translate="no" />>/content/an-scf-sandbox
      • Klik op Done

    • Klik op Save

  • Klik op Build

Nu kunt u Download opslaan naar schijf en Upload Package en selecteert u More > Replicate om de sandbox naar een publicatieinstantie van de localhost te verplaatsen en het domein van de sandbox uit te breiden.

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