Clientlibs hinzufügen

Hinzufügen eines ClientLibraryFolder (clientlibs)

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
- Name : clientlibs
- Typ : cq:ClientLibraryFolder
Klicken Sie auf OK

add-client-library

Im Eigenschaften Registerkarte für die neue clientlibs Knoten, geben Sie die categories Eigenschaft:

Name : categories
Typ:String
Wert : apps.an-scf-sandbox
Klicken Sie auf Hinzufügen
Klicken Sie auf 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.txt und css.txt Dateien. (Es handelt sich nicht offiziell um einen cq:ClientLibraryFolder ohne diese Ordner.)

Klicken Sie mit der rechten Maustaste /etc/designs/an-scf-sandbox/clientlibs
Auswählen Datei erstellen…
Eingabe Name: css.txt
Auswählen Datei erstellen…
Eingabe Name: js.txt
Klicken Sie auf Alle speichern

clientlibs-css

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

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 OK
Klicken Sie auf Alle speichern

scf-clientlibs

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

scf-clientlibs-view

Einschließen von Clientlibs in die PlayPage-Vorlage

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:

clientlibs-comment

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

clientlibs-comment-styled

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

community-play

Ihre Arbeit bisher retten

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
- Paketname: an-scf-sandbox-minimal-pkg
- Version: 0,1
- Gruppe: leave as default
- Klicken Sie auf OK
Klicken Sie auf Bearbeiten
- Auswählen Filter tab
  - Klicken Filter hinzufügen
  - Stammpfad: Durchsuchen nach /apps/an-scf-sandbox
  - Klicken Sie auf Fertig
  - Klicken Filter hinzufügen
  - Stammpfad: Durchsuchen nach /etc/designs/an-scf-sandbox
  - Klicken Sie auf Fertig
  - Klicken Filter hinzufügen
  - Stammpfad: Durchsuchen nach /content/an-scf-sandbox**
  - Klicken Sie auf Fertig
- 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.