Show Menu
THEMEN×

Clientlibs hinzufügen

Hinzufügen eines ClientLibraryFolder (clientlibs)

Erstellen Sie einen ClientLibraryFolder-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 diese clientlib direkt von einer Inhaltsseite einzubeziehen oder sie in andere clientlibs einzubetten.
  1. Using CRXDE Lite , expand /etc/designs
  2. Klicken Sie mit der rechten Maustaste an-scf-sandbox und wählen Sie Create Node
    • Name: clientlibs
    • Typ: cq:ClientLibraryFolder
  3. Klicken Sie auf OK .
Geben Sie auf der Registerkarte Eigenschaften für den neuen clientlibs Knoten die categories Eigenschaft ein:
  • Name: Kategorien
  • 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 'besitzende Anwendung' als im Ordner /apps, nicht als /libs identifiziert. WICHTIG: Fügen Sie Platzhalter js.txt und css.txt Dateien hinzu. (Es handelt sich nicht offiziell um cq:ClientLibraryFolder ohne diese.)
  1. Rechtsklick auf /etc/designs/an-scf-sandbox/clientlibs
  2. Wählen Sie Datei erstellen...
  3. Enter Name : css.txt
  4. Wählen Sie Datei erstellen...
  5. Enter Name : js.txt
  6. Klicken Sie auf Alle speichern
Die erste Zeile der Dateien "css.txt"und "js.txt"identifiziert den Basisort, von dem aus die folgenden Dateilisten zu finden sind.
Versuchen Sie, den Inhalt von css.txt auf Folgendes festzulegen:
#base=.
 style.css

Erstellen Sie dann eine Datei unter clientlibs namens style.css und stellen Sie den Inhalt auf Folgendes ein:
body {
background-color: #b0c4de;
}

SCF Clientlibs einbetten

Geben Sie auf der Registerkarte Eigenschaften für den clientlibs Knoten die Eigenschaft mit mehreren Werten embed ein. Dadurch werden die erforderlichen clientseitigen Bibliotheken (clientlibs) für SCF-Komponenten eingebettet. Für dieses Tutorial werden wir viele clientlibs hinzufügen, 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 categories=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 nach jedem Eintrag auf #, 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
So /etc/designs/an-scf-sandbox/clientlibs sollte es nun im Repository angezeigt werden:

Clientlibs in PlayPage-Vorlage einschließen

Ohne Einbeziehung der Kategorie " apps.an-scf-sandbox ClientLibraryFolder"auf der Seite 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 script. Die Standardeinstellung foundation head.jsp enthält ein Skript, das überlagert werden kann: headlibs.jsp .
Kopieren Sie "headlibs.jsp"und schließen Sie clientlibs ein:
  1. Using CRXDE Lite , select /libs/foundation/components/page/headlibs.jsp
  2. Klicken Sie mit der rechten Maustaste und wählen Sie " Kopieren "(oder wählen Sie in der Symbolleiste "Kopieren")
  3. Wählen Sie nun eine der folgenden Optionen aus /apps/an-scf-sandbox/components/playpage
  4. Klicken Sie mit der rechten Maustaste und wählen Sie Einfügen (oder wählen Sie in der Symbolleiste die Option Einfügen)
  5. Doppelklicken Sie auf headlibs.jsp , um es zu öffnen
  6. Fügen Sie die folgende Zeile an das Dateiende an
    <ui:includeClientLib categories="apps.an-scf-sandbox"/>
  7. 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.

Bisher sparen Sie Ihre Arbeit

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 von vorn beginnen möchten, Ihren Server ausschalten, den Ordner crx-quickstart/ umbenennen oder löschen, den Server einschalten, das gespeicherte Paket hochladen und installieren können und diese grundlegenden Schritte nicht wiederholen müssen.
Dieses Paket gibt es im Tutorial Erstellen einer Beispielseite für diejenigen, die nicht warten können, einfach zu springen und spielen!...
So erstellen Sie ein Paket:
  • Klicken Sie in CRXDE Lite auf das Symbol Paket
  • Klicken Sie auf Paket erstellen
    • Paket-Name: an-scf-sandbox-minimal-pkg
    • Version: 0.1
    • Gruppe: <Als Standard beibehalten>
    • Klicken Sie auf OK .
  • Klicken Sie auf Bearbeiten .
    • Registerkarte Filter auswählen
      • Click Add filter
      • Stammpfad: <suchen nach /apps/an-scf-sandbox >
      • Klicken Sie auf Fertig
      • Click Add filter
      • Stammpfad: <suchen nach /etc/designs/an-scf-sandbox >
      • Klicken Sie auf Fertig
      • Click Add filter
      • Stammpfad: <suchen nach /content/an-scf-sandbox >
      • Klicken Sie auf Fertig
    • Klicken Sie auf Speichern .
  • Klicken Sie auf Erstellen
Jetzt können Sie " Herunterladen "auswählen, um es auf der Festplatte zu speichern und Paket an anderer Stelle hochzuladen, sowie Mehr > Replizieren wählen, um die Sandbox an eine Instanz im Veröffentlichungsmodus von localhost zu verschieben, um den Bereich Ihrer Sandbox zu erweitern.