DokumentationAEM 6.4Communities-Anleitung

Clientlibs hinzufügen add-clientlibs

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

Erstellt für:

  • User
CAUTION
AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

Hinzufügen eines ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs

Erstellen Sie einen ClientLibraryFolder mit dem Namen clientlibsenthält das JS und CSS, die zum Rendern der Seiten Ihrer Site verwendet werden.

Die categoriesDer Eigenschaftswert, der dieser Client-Bibliothek zugewiesen wird, ist die Kennung, die verwendet wird, um diese Client-Bibliothek direkt von einer Inhaltsseite aus oder um sie in andere Client-Bibliotheken einzubetten.

  1. Verwenden CRXDE Lite, erweitern /etc/designs

  2. Rechtsklick an-scf-sandbox und wählen Sie Create Node

    • Name: clientlibs
    • Typ: cq:ClientLibraryFolder

  3. Klicken Sie auf OK

chlimage_1-220

Im Eigenschaften Registerkarte für die neue clientlibs Knoten, geben Sie die categories Eigenschaft:

  • Name: categories
  • Typ:String
  • Wert: apps.an-scf-sandbox
  • Klicken Sie auf Hinzufügen
  • Klicken Sie auf Alle speichern

Hinweis: dem Kategoriewert "apps"voranstellen. ist eine Konvention, die die 'owning application' als im Ordner /apps, nicht /libs identifiziert. WICHTIG: Platzhalter hinzufügen js.txt und css.txt Dateien. (Es handelt sich nicht offiziell um einen cq:ClientLibraryFolder ohne diese Ordner.)

  1. Klicken Sie mit der rechten Maustaste auf /etc/designs/an-scf-sandbox/clientlibs

  2. Auswählen Datei erstellen…

  3. Eingabe Name: css.txt

  4. Auswählen Datei erstellen…

  5. Eingabe Name: js.txt

  6. Klicken Sie auf Alle speichern

chlimage_1-221

Die erste Zeile von css.txt und js.txt identifiziert den Basisspeicherort, von dem aus die folgenden Dateilisten zu finden sind.

Versuchen Sie, den Inhalt von css.txt auf Folgendes festzulegen:

#base=.
 style.css

Erstellen Sie dann eine Datei unter clientlibs namens style.css und setzen Sie den Inhalt auf:

body {

background-color: #b0c4de;

}

Einbetten von SCF Clientlibs embed-scf-clientlibs

Im Eigenschaften Registerkarte für die clientlibs Knoten, geben Sie die String-Eigenschaft mit mehreren Werten ein. embed. Dadurch werden die erforderlichen Client-seitige Bibliotheken (clientlibs) für SCF-Komponenten. Für dieses Tutorial fügen wir viele der clientlibs hinzu, die für die Communities-Komponenten erforderlich sind.

Hinweis dass dies der gewünschte Ansatz für eine Produktions-Site sein kann oder auch nicht, da Überlegungen zur Benutzerfreundlichkeit im Vergleich zur Größe/Geschwindigkeit der für jede Seite heruntergeladenen Clientlibs vorliegen.

Wenn Sie nur eine Funktion auf einer Seite verwenden, können Sie die vollständige clientlib dieser Funktion direkt auf der Seite einbeziehen, z. B. <% ui:includeClientLib categories=cq.social.hbs.forum" %>

In diesem Fall schließen wir alle ein und bevorzugen daher die grundlegenderen SCF-Clientlibs, die die Autoren-Clientlibs sind:

  • Name: embed

  • Typ: String

  • Klicken Sie auf Multi

  • Wert: cq.social.scf

    <enter> öffnet ein Dialogfeld

    Klicken [+] ​nach jedem Eintrag, um die folgenden clientlib-Kategorien hinzuzufügen:

    • 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
    • Klicken Sie auf OK

  • Klicken Sie auf Alle speichern

chlimage_1-222

So /etc/designs/an-scf-sandbox/clientlibs sollte nun im Repository angezeigt werden:

chlimage_1-223

Einschließen von Clientlibs in die PlayPage-Vorlage include-clientlibs-in-playpage-template

Ohne Einbeziehung der apps.an-scf-sandbox ClientLibraryFolder auf der Seite verwenden, sind die SCF-Komponenten weder funktionsfähig noch gestylt, da die erforderlichen JavaScript(s) und Stile(s) nicht verfügbar sind.

Ohne die clientlibs einschließen zu müssen, wird die SCF-Kommentar-Komponente beispielsweise nicht formatiert angezeigt:

chlimage_1-224

Sobald apps.an-scf-sandbox clientlibs enthalten ist, wird die SCF-Kommentar-Komponente formatiert angezeigt:

chlimage_1-225

Die Include-Anweisung gehört in die <head> Abschnitt <html> Skript. Die Standardeinstellung foundation head.jsp enthält ein Skript, das überlagert werden kann: headlibs.jsp.

Kopieren Sie headlibs.jsp und fügen Sie clientlibs ein:

  1. Verwenden CRXDE Lite auswählen /libs/foundation/components/page/headlibs.jsp

  2. Klicken Sie mit der rechten Maustaste und wählen Sie Kopieren (oder wählen Sie in der Symbolleiste Kopieren aus)

  3. Klicken Sie auf /apps/an-scf-sandbox/components/playpage

  4. Klicken Sie mit der rechten Maustaste und wählen Sie Einfügen (oder wählen Sie in der Symbolleiste Einfügen aus)

  5. Doppelklicken Sie auf headlibs.jsp öffnen

  6. Hängen Sie die folgende Zeile an das Ende der Datei an

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

  7. Klicken Sie auf Alle speichern

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

Laden Sie Ihre Website in den Browser und überprüfen Sie, ob der Hintergrund kein Blau ist.

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

chlimage_1-226

Ihre Arbeit bisher retten saving-your-work-so-far

An dieser Stelle gibt es eine minimalistische Sandbox, und es kann sich lohnen, als Paket zu speichern, damit Sie während der Wiedergabe den Server deaktivieren, umbenennen oder löschen können, wenn Ihr Repository beschädigt wird und Sie ihn neu starten möchten, den Server einschalten, hochladen und installieren können, ohne diese grundlegenden Schritte wiederholen zu müssen.

Dieses Paket befindet sich auf der Erstellen einer Beispielseite Tutorial für diejenigen, die nicht warten können, einfach zu springen und zu spielen!..

So erstellen Sie ein Paket:

  • Von CRXDE Lite, klicken Sie auf die Paketsymbol

  • Klicken Sie auf Paket erstellen

    • Paket-Name: an-scf-sandbox-minimal-pkg
    • Version: 0.1
    • Gruppe: <leave as="" default="">
    • Klicken Sie auf OK

  • Klicken Sie auf Bearbeiten

    • Auswählen Filter tab

      • Klicken Filter hinzufügen
      • Stammpfad: <browse to="" span="" id="0" translate="no" />>/apps/an-scf-sandbox
      • Klicken Sie auf Fertig
      • Klicken Filter hinzufügen
      • Stammpfad: <browse to="" span="" id="0" translate="no" />>/etc/designs/an-scf-sandbox
      • Klicken Sie auf Fertig
      • Klicken Filter hinzufügen
      • Stammpfad: <browse to="" span="" id="0" translate="no" />>/content/an-scf-sandbox
      • Klicken Sie auf Fertig

    • Klicken Sie auf Speichern.

  • Klicken Sie auf Aufbauen

Jetzt können Sie Download , um es auf der Festplatte zu speichern und Paket hochladen und wählen Sie Mehr > Replizieren , um die Sandbox an eine localhost-Veröffentlichungsinstanz zu pushen, um den Bereich Ihrer Sandbox zu erweitern.

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