Erstellen Sie einen ClientLibraryFolder mit dem Namen clientlibs
enthält das JS und CSS, die zum Rendern der Seiten Ihrer Site verwendet werden.
Die categories
Der 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.
Verwenden CRXDE Lite, erweitern /etc/designs
Rechtsklick an-scf-sandbox
und wählen Sie Create Node
clientlibs
cq:ClientLibraryFolder
Klicken Sie auf OK
Im Eigenschaften Registerkarte für die neue clientlibs
Knoten, geben Sie die categories Eigenschaft:
Hinweis: dem Kategoriewert "apps"voranstellen. ist eine Konvention, die die 'owning application' als im Ordner /apps, nicht /libs identifiziert. WICHTIG: Platzhalter hinzufügen js.tx
t und css.txt
Dateien. (Es handelt sich nicht offiziell um einen cq:ClientLibraryFolder ohne diese Ordner.)
/etc/designs/an-scf-sandbox/clientlibs
css.txt
js.txt
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;
}
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 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:
Name : embed
Typ : String
Klicken Sie auf Multi
Wert: cq.social.scf
Es wird ein Dialogfeld angezeigt, 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 /etc/designs/an-scf-sandbox/clientlibs
sollte nun im Repository angezeigt werden:
Ohne Einbeziehung der apps.an-scf-sandbox
ClientLibraryFolder auf der Seite verwenden, sind die SCF-Komponenten nicht funktionsfähig und formatiert, da die erforderlichen JavaScript-Elemente und 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 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:
Verwenden CRXDE Lite auswählen /libs/foundation/components/page/headlibs.jsp
Klicken Sie mit der rechten Maustaste und wählen Sie Kopieren (oder wählen Sie in der Symbolleiste Kopieren aus)
Klicken Sie auf /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 aus)
Doppelklicken headlibs.jsp
öffnen
Hängen Sie die folgende Zeile an das Ende der Datei 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 überprüfen Sie, ob der Hintergrund kein Blau ist.
https://localhost:4502/content/an-scf-sandbox/en/play.html
An dieser Stelle gibt es eine minimalistische Sandbox, und es kann sich lohnen, als Paket zu speichern, damit Sie während der Wiedergabe den Ordner crx-quickstart/ deaktivieren, den Server einschalten, dieses gespeicherte Paket hochladen und installieren und diese grundlegenden Schritte nicht wiederholen müssen, wenn Ihr Repository beschädigt wird und Sie es neu starten möchten.
Dieses Paket befindet sich auf der Erstellen einer Beispielseite Tutorial für diejenigen, die nicht warten können, zu springen und zu spielen!..
So erstellen Sie ein Paket:
Klicken Sie in CRXDE Lite auf die Paketsymbol
Klicken Sie auf Paket erstellen
leave as default
Klicken Sie auf Bearbeiten
Auswählen Filter tab
/apps/an-scf-sandbox
/etc/designs/an-scf-sandbox
/content/an-scf-sandbox**
Klicken Sie auf Speichern.
Klicken Sie auf Aufbauen
Jetzt können Sie Download , um es auf der Festplatte zu speichern und Paket hochladen an einer anderen Stelle und wählen Sie Mehr > Replizieren , um die Sandbox an eine localhost-Veröffentlichungsinstanz zu senden, um den Bereich Ihrer Sandbox zu erweitern.