Clientlibs hinzufügen add-clientlibs

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

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

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

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

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

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

#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

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 werden viele der clientlibs hinzugefügt, die für die Communities-Komponenten erforderlich sind.

Dies kann der gewünschte Ansatz für eine Produktions-Site sein 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 einfügen, z. B.

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

In diesem Fall werden die einfacheren SCF-Clientlibs, die die Autoren-Clientlibs sind, einschließlich aller bevorzugt:

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

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

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

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

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

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 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 in den Browser und überprüfen Sie, ob der Hintergrund kein Blau ist.

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

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

An dieser Stelle gibt es eine minimalistische Sandbox. Es kann sich lohnen, als Paket zu speichern, damit Sie während der Wiedergabe den Server ausschalten können, wenn Ihr Repository beschädigt wird und Sie einen Neustart durchführen 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 diese grundlegenden Schritte nicht wiederholen.

Dieses Paket befindet sich im Tutorial zum Erstellen einer Beispielseite 🔗 für diejenigen, die nicht darauf warten können, hineinzuspringen und mit der Wiedergabe zu beginnen.

So erstellen Sie ein Paket:

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