Erstellen Sie einen ClientLibraryFolder mit dem Namen clientlibs
der die JS- und CSS-Dateien enthält, die zum Rendern der Seiten Ihrer Site verwendet werden.
Der categories
Eigenschaftswert, 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
clientlibs
cq:ClientLibraryFolder
Klicken Sie auf OK
Geben Sie auf der Registerkarte Eigenschaften für den neuen Knoten clientlibs
die Eigenschaft categories
ein:
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
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;
}
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 Alle speichern
So sollte /etc/designs/an-scf-sandbox/clientlibs
jetzt im Repository angezeigt werden:
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:
Sobald apps.an-scf-sandbox clientlibs enthalten ist, wird die Komponente "SCF-Kommentare"mit einem Stil 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 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
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
an-scf-sandbox-minimal-pkg
0.1
Klicken Sie auf Bearbeiten.
Registerkarte Filter auswählen
/apps/an-scf-sandbox
/etc/designs/an-scf-sandbox
/content/an-scf-sandbox
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.