Clientlibs hinzufügen add-clientlibs
Hinzufügen eines ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs
Erstellen Sie einen ClientLibraryFolder mit dem Namen clientlibs
enthält die JavaScript (JS)- und Cascading Styles Tabellen (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ählenCreate Node
- Name :
clientlibs
- Typ :
cq:ClientLibraryFolder
- Name :
-
Klicks OK
Im Eigenschaften Registerkarte für die neue clientlibs
Knoten, geben Sie die categories Eigenschaft:
- Name : categories
- Typ : Zeichenfolge
- Wert : apps.an-scf-sandbox
- Klicks Hinzufügen
- Klicks Alle speichern
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.)
- Rechtsklick
/etc/designs/an-scf-sandbox/clientlibs
- Auswählen Datei erstellen…
- Eingabe Name:
css.txt
- Auswählen Datei erstellen…
- Eingabe Name:
js.txt
- Klicks Alle speichern
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
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
-
Klicks
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
- Klicks OK
-
-
Klicks Alle speichern
So /etc/designs/an-scf-sandbox/clientlibs
sollte nun im Repository angezeigt werden:
Einschließen von Clientlibs in die PlayPage-Vorlage include-clientlibs-in-playpage-template
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- 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 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
-
Rechtsklicken Sie auf und wählen Sie Kopieren (oder wählen Sie in der Symbolleiste Kopieren aus)
-
Klicken Sie auf
/apps/an-scf-sandbox/components/playpage
-
Rechtsklicken Sie auf und wählen Sie Einfügen (oder wählen Sie in der Symbolleiste Einfügen aus)
-
Doppelklicken
headlibs.jsp
damit Sie sie öffnen können -
Hängen Sie die folgende Zeile an das Ende der Datei an
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
-
Klicks 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
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 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 unter CRXDE Lite auf das Paketsymbol
-
Klicks Paket erstellen
- Paketname: an-scf-sandbox-minimal-pkg
- Version: 0.1
- Gruppe:
leave as default
- Klicks OK
-
Klicks Bearbeiten
-
Auswählen Filter tab
- Klicks Filter hinzufügen
- Stammpfad: navigieren Sie zu
/apps/an-scf-sandbox
- Klicken Sie auf Fertig.
- Klicks Filter hinzufügen
- Stammpfad: navigieren Sie zu
/etc/designs/an-scf-sandbox
- Klicken Sie auf Fertig.
- Klicks Filter hinzufügen
- Stammpfad: navigieren Sie zu
/content/an-scf-sandbox**
- Klicken Sie auf Fertig.
-
Klicken Sie auf Speichern.
-
-
Klicks Build
Jetzt können Sie Herunterladen , 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.