hinzufügen Clientlibs

hinzufügen eines ClientLibraryFolder (clientlibs)

Erstellen Sie einen ClientLibraryFolder mit dem Namen clientlibsder die JS- und CSS-Dateien enthält, die zum Rendern der Seiten Ihrer Site verwendet werden.

Der categoriesEigenschaftswert, der dieser Client-Bibliothek gegeben wird, ist der Bezeichner, der verwendet wird, um clientlib direkt von einer Inhaltsseite einzuschließen oder es in andere clientlibs einzubetten.

Erweitern Sie CRXDE Lite/etc/designs
Klicken Sie mit der rechten Maustaste auf an-scf-sandbox und wählen Sie Create Node
- Name: clientlibs
- Typ: cq:ClientLibraryFolder
Klicken Sie auf OK

chlimage_1-220

Geben Sie auf der Registerkarte Eigenschaften für den neuen Knoten clientlibs die Eigenschaft categories ein:

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

Hinweis: dem Wert "Kategorien"mit "Apps"voranstellen. ist eine Konvention, die 'besitzende Anwendung' als im Ordner /apps, nicht als /libs identifiziert. WICHTIG: hinzufügen Platzhalter js.txt- und css.txt-Dateien. (Es handelt sich nicht offiziell um cq:ClientLibraryFolder ohne diese.)

Rechtsklick auf /etc/designs/an-scf-sandbox/clientlibs
Wählen Sie Datei erstellen…
Geben Sie Name ein: css.txt
Wählen Sie Datei erstellen…
Geben Sie Name ein: js.txt
Klicken Sie auf Alle speichern

chlimage_1-221

Die erste Zeile der Dateien "css.txt"und "js.txt"gibt den Basisspeicherort an, von dem aus die folgenden Listen zu finden sind.

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

#base=.
 style.css

Erstellen Sie dann eine Datei unter clientlibs mit dem Namen style.css und stellen Sie den Inhalt auf Folgendes ein:

body {

background-color: #b0c4de;

}

SCF-Clientlibseinbetten

Geben Sie auf der Registerkarte Eigenschaften für den Knoten clientlibs die String-Eigenschaft mit mehreren Werten embed ein. Dadurch werden die erforderlichen clientseitigen Bibliotheken (clientlibs) für SCF-Komponenten eingebettet. Für dieses Tutorial fügen wir viele clientlibs hinzu, die für die Communities-Komponenten notwendig sind.

Beachten Sie, dass dies der gewünschte Ansatz für eine Produktionssite sein kann oder nicht, da es Hinweise zur Bequemlichkeit im Vergleich zur Größe/Geschwindigkeit der für jede Seite heruntergeladenen clientlibs gibt.

Wenn Sie nur eine Funktion auf einer Seite verwenden, könnten Sie die vollständige clientlib dieser Funktion direkt auf der Seite einfügen, z. B. <% ui:includeClientLib-Kategorien=cq.social.hbs.forum" %>

In diesem Fall schließen wir sie alle ein und würden daher die einfacheren SCF clientlibs bevorzugen, die der Autor clientlibs sind:

Name: embed
Typ: String
Klicken Sie auf Multi
Wert: cq.social.scf

<enter> öffnet ein Dialogfeld

Klicken Sie auf [+]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 sollte /etc/designs/an-scf-sandbox/clientlibs jetzt im Repository angezeigt werden:

chlimage_1-223

Clientlibs in PlayPage-Vorlage einschließen

Ohne die apps.an-scf-sandbox ClientLibraryFolder-Kategorie auf der Seite einschließen zu müssen, sind die SCF-Komponenten nicht funktionsfähig oder gestylt, da die erforderlichen JavaScript(s) und Stile(s) nicht verfügbar sind.

Beispielsweise wird die Komponente "SCF-Kommentare"ohne Einbeziehung der clientlibs unformatiert angezeigt:

chlimage_1-224

Sobald apps.an-scf-sandbox clientlibs enthalten ist, wird die Komponente "SCF-Kommentare"mit einem Stil angezeigt:

chlimage_1-225

Die include-Anweisung gehört zum Abschnitt <head> des Skripts <html>. Der Standardwert foundation head.jsp enthält ein Skript, das überlagert werden kann: headlibs.jsp.

Kopieren Sie die Datei "headlibs.jsp"und schließen Sie clientlibs ein:

Wählen Sie CRXDE Lite /libs/foundation/components/page/headlibs.jsp
Klicken Sie mit der rechten Maustaste und wählen Sie Kopieren (oder wählen Sie Kopieren aus der Symbolleiste)
Wählen Sie nun eine der folgenden Optionen aus /apps/an-scf-sandbox/components/playpage
Klicken Sie mit der rechten Maustaste und wählen Sie Einfügen (oder wählen Sie in der Symbolleiste Einfügen)
Klicken Sie auf headlibs.jsp, um die Dublette zu öffnen
Fügen Sie die folgende Zeile an das Dateiende an

<ui:includeClientLib categories="apps.an-scf-sandbox"/>
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 sehen Sie, ob der Hintergrund kein Schatten von Blau ist.

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

chlimage_1-226

Speichern Ihrer Arbeit bisher

An dieser Stelle gibt es eine minimalistische Sandbox, und es könnte sich lohnen, als Paket zu speichern, sodass Sie beim Abspielen, wenn Ihr Resppositionieren beschädigt wird und Sie Beginn zu beenden wünschen, Ihren Server ausschalten, umbenennen oder löschen können, den Server einschalten, das gespeicherte Paket hochladen und installieren können und diese grundlegenden Schritte nicht wiederholen müssen.

Dieses Paket existiert im Tutorial Eine Beispielseite erstellen für diejenigen, die nicht darauf warten können, einfach hineinzuspringen und Beginn spielen!..

So erstellen Sie ein Paket:

Klicken Sie in CRXDE Lite auf das Paketsymbol
Klicken Sie auf Paket erstellen
- Paket-Name: an-scf-sandbox-minimal-pkg
- Version: 0.1
- Gruppe: <Als Standard beibehalten>
- Klicken Sie auf OK
Klicken Sie auf Bearbeiten.
- Registerkarte Filter auswählen
  - Klicken Sie auf Hinzufügen Filter
  - Stammpfad: <navigieren Sie zu /apps/an-scf-sandbox
  - Klicken Sie auf Fertig
  - Klicken Sie auf Hinzufügen Filter
  - Stammpfad: <navigieren Sie zu /etc/designs/an-scf-sandbox
  - Klicken Sie auf Fertig
  - Klicken Sie auf Hinzufügen Filter
  - Stammpfad: <navigieren Sie zu /content/an-scf-sandbox
  - Klicken Sie auf Fertig
- Klicken Sie auf Speichern.
Klicken Sie auf Erstellen

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

Materialien auf adobe.com

Personalized Experiences Customer Communications Content Intelligence Personalized Communications Dynamic Media Digital Asset Management

Auf dieser Seite

Als Nächstes anzeigen:

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free