Clientlibs hinzufügen add-clientlibs

Hinzufügen eines Client-Bibliotheksordners (clientlibs) add-a-clientlibraryfolder-clientlibs

Erstellen Sie einen ClientLibraryFolder mit dem Namen clientlibs, der die JavaScript (JS)- und Cascading Stylesheets (CSS) enthält, die zum Rendern der Seiten Ihrer Site verwendet werden.

Der dieser Client-Bibliothek übergebene categories-Eigenschaftswert ist die Kennung, die verwendet wird, um diese Client-Bibliothek direkt von einer Inhaltsseite einzuschließen oder sie in andere Client-Bibliotheken einzubetten.

Geben Sie auf Registerkarte Eigenschaften“ für den neuen clientlibs die Eigenschaft Kategorien ein:

Hinweis: Stellen Sie dem Kategoriewert das Präfix „apps“ voran. ist eine Konvention, um festzulegen, dass sich die „besitzende Anwendung“ im Ordner "/apps“ und nicht in "/libs“ befindet. WICHTIG: Fügen Sie Platzhalterdateien js.tx und css.txt. (Es handelt sich hierbei nicht um einen offiziellen cq:ClientLibraryFolder ohne sie.)

Die erste Zeile von css.txt und js.txt gibt den Basisspeicherort an, 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 unter „clientlibs“ eine Datei mit dem Namen „style.css“ und legen Sie den Inhalt auf fest.

body {

background-color: #b0c4de;

}

SCF-Clientlibs einbetten embed-scf-clientlibs

Geben auf der „Eigenschaften“ für den clientlibs die String-Eigenschaft mit mehreren Werten ein embed. Dadurch werden die erforderlichen Client-seitigen Bibliotheken (clientlibs) für SCF-Komponenten. In diesem Tutorial werden viele der Client-Bibliotheken hinzugefügt, die für die Communities-Komponenten erforderlich sind.

Dies kann der gewünschte Ansatz für eine Produktions-Site sein, muss aber nicht, da es Überlegungen zur Benutzerfreundlichkeit im Verhältnis zur Größe/Geschwindigkeit der heruntergeladenen Clientlibs für jede Seite gibt.

Wenn Sie nur eine Funktion auf einer Seite verwenden, können Sie die vollständige Clientlib dieser Funktion direkt auf der Seite einfügen, z. B.

% ui:includeClientLib categories=cq.social.hbs.forum" %

In diesem Fall, einschließlich aller , werden die einfacheren SCF-Client-Bibliotheken, bei denen es sich um die Autoren-Client-Bibliotheken handelt, bevorzugt:

So sollten /etc/designs/an-scf-sandbox/clientlibs jetzt im Repository angezeigt werden:

Clientlibs in PlayPage-Vorlage einschließen include-clientlibs-in-playpage-template

Ohne Einbeziehung der apps.an-scf-sandbox ClientLibraryFolder -Kategorie auf der Seite sind die SCF-Komponenten nicht funktionsfähig und auch nicht für die Formatierung geeignet, da die erforderlichen JavaScript- und CSS-Stile nicht verfügbar sind.

Ohne Client-Bibliotheken zum Beispiel erscheint die Komponente „SCF-Kommentare“ unformatiert:

Sobald apps.js-scf-sandbox-clientlibs eingeschlossen ist, erscheint die Komponente SCF-Kommentare mit dem Stil :

Die Include-Anweisung gehört in den head des html. Die foundation head.jsp enthält ein Skript, das überlagert werden kann: headlibs.jsp.

Kopieren Sie „headlibs.jsp“ und schließen Sie clientlibs: ein

<%@ 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 im Browser und prüfen Sie, ob der Hintergrund kein Blautöne aufweist.

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

Speichern Sie Ihre bisherige Arbeit saving-your-work-so-far

An diesem Punkt gibt es eine minimalistische Sandbox. Es könnte sich lohnen, ihn als Paket zu speichern, sodass Sie Ihren Server während der Wiedergabe ausschalten können, wenn Ihr Repository beschädigt wird und Sie von vorne beginnen möchten. Benennen oder löschen Sie dann den Ordner „crx-quickstart/", schalten Sie Ihren Server ein, laden Sie dieses gespeicherte Paket hoch und installieren Sie es, und müssen Sie nicht die grundlegendsten Schritte wiederholen.

Dieses Paket ist im Tutorial Erstellen einer Beispielseite für diejenigen enthalten, die nicht warten können, bis sie loslegen und mit der Wiedergabe beginnen.

So erstellen Sie ein Paket:

Jetzt können Sie auf Herunterladen klicken, um die Sandbox auf der Festplatte zu speichern und Paket hochzuladen und auf Mehr > Replizieren klicken, um die Sandbox auf eine localhost-Veröffentlichungsinstanz zu pushen und den Bereich Ihrer Sandbox zu erweitern.