Show Menu
THEMEN×

hinzufügen Clientlibs

hinzufügen eines ClientLibraryFolder (clientlibs)

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 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 Eigenschaft Kategorien ein:
  • Name: Kategorien
  • Typ: String
  • Wert: apps.an-scf-sandbox
  • Klicken Sie auf Hinzufügen
  • Klicken Sie auf Alle speichern
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.tx t und css.txt Dateien. (Es handelt sich nicht offiziell um cq:ClientLibraryFolder ohne diese.)
  1. Right-click /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"gibt den Basisspeicherort an, von dem aus die folgenden Listen zu finden sind.
Versuchen Sie, den Inhalt von "css.txt"auf
#base=.
 style.css

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

SCF Clientlibs einbetten

Geben Sie auf der Registerkarte " Eigenschaften "für den clientlibs Knoten die Eigenschaft "String mit mehreren Werten" embed ein. Dadurch werden die erforderlichen clientseitigen Bibliotheken (clientlibs) für SCF-Komponenten eingebettet. Für dieses Tutorial werden viele der clientlibs hinzugefügt, die für die Communities-Komponenten erforderlich 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, einschließlich aller und so die einfacheren SCF clientlibs, die Autor clientlibs sind bevorzugt werden:
  • Name : embed
  • Typ : String
  • Klicken Sie auf Multi
  • Wert: cq.social.scf
    • Es wird ein Dialogfeld geöffnet, + klicken Sie 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
So /etc/designs/an-scf-sandbox/clientlibs sollte es nun im Repository angezeigt werden:

Clientlibs in PlayPage-Vorlage einschließen

Ohne die apps.an-scf-sandbox ClientLibraryFolder-Kategorie auf der Seite einzuschließen, sind die SCF-Komponenten nicht funktionsfähig und werden nicht 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 head Abschnitt des html Skripts. Die Standardeinstellung 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:
  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. Dublette-Klick headlibs.jsp zum Ö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 Repository beschädigt wird und Sie Beginn verlieren möchten, Ihren Server ausschalten, umbenennen oder löschen können, Ihren Server einschalten, das gespeicherte Paket hochladen und installieren können, und nicht diese grundlegenden Schritte wiederholen müssen.
Dieses Paket existiert im Tutorial Create a Sample Page für diejenigen, die nicht warten können, einfach zu springen und Beginn spielen!...
So erstellen Sie ein Paket:
  • Klicken Sie in der CRXDE Lite auf das Symbol Paket
  • 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 .
    • Registerkarte Filter auswählen
      • Click Add filter
      • Stammpfad: zu /apps/an-scf-sandbox
      • Klicken Sie auf Fertig
      • Click Add filter
      • Stammpfad: zu /etc/designs/an-scf-sandbox
      • Klicken Sie auf Fertig
      • Click Add filter
      • Stammpfad: zu /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.