Clientlibs hinzufügen

Hinzufügen eines ClientLibraryFolder (clientlibs)

Erstellen Sie einen ClientLibraryFolder mit dem Namen clientlibsder die JS- und CSS-Dateien enthält, die zum Rendern der Seiten Ihrer Site verwendet werden.

Der categoriesEigenschaftswert, der dieser Client-Bibliothek zugewiesen wird, ist der Bezeichner, der verwendet wird, um diese Client-Bibliothek direkt von einer Inhaltsseite aus oder in andere Client-Bibliotheken einzubetten.

  1. Erweitern Sie /etc/designs mithilfe von CRXDE Lite.

  2. Klicken Sie mit der rechten Maustaste auf an-scf-sandbox und wählen Sie Create Node aus.

    • Name: clientlibs
    • Typ: cq:ClientLibraryFolder

  3. Klicken Sie auf OK

chlimage_1-220

Geben Sie auf der Registerkarte Properties für den neuen Knoten clientlibs die Eigenschaft categories 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 die 'owning application' als im Ordner /apps, nicht /libs identifiziert. WICHTIG: Fügen Sie Platzhalter für js.txt- und css.txt-Dateien hinzu. (Es handelt sich nicht offiziell um einen cq:ClientLibraryFolder ohne diese Ordner.)

  1. Rechtsklick auf /etc/designs/an-scf-sandbox/clientlibs

  2. Wählen Sie Datei erstellen…

  3. Geben Sie Name ein: css.txt

  4. Wählen Sie Datei erstellen…

  5. Geben Sie Name ein: js.txt

  6. Klicken Sie auf Alle speichern

chlimage_1-221

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 Folgendes festzulegen:

#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

Geben Sie auf der Registerkarte Eigenschaften für den Knoten clientlibs die String-Eigenschaft mit mehreren Werten embed ein. Dadurch werden die erforderlichen Client-seitigen Bibliotheken (clientlibs) für SCF-Komponenten eingebettet. Für dieses Tutorial fügen wir viele der clientlibs hinzu, die für die Communities-Komponenten erforderlich sind.

​​Beachten Sie, dass dies möglicherweise der gewünschte Ansatz für eine Produktions-Site ist oder 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 einbeziehen, z. B. <% ui:includeClientLib categories=cq.social.hbs.forum" %>

In diesem Fall schließen wir alle ein und bevorzugen daher die grundlegenderen SCF-Clientlibs, die die Autoren-Clientlibs sind:

  • Name: embed

  • Typ: String

  • Klicken Sie auf Multi

  • Wert: cq.social.scf

    <enter> öffnet ein Dialogfeld

    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

chlimage_1-222

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

chlimage_1-223

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 und gestylt, da die erforderlichen JavaScript(s) und Stile(s) nicht verfügbar sind.

Ohne die clientlibs einschließen zu müssen, wird die SCF-Kommentar-Komponente beispielsweise nicht formatiert angezeigt:

chlimage_1-224

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

chlimage_1-225

Die Include-Anweisung gehört zum Abschnitt <head> des Skripts <html> . Der Standard foundation head.jsp enthält ein Skript, das überlagert werden kann: headlibs.jsp.

Kopieren Sie headlibs.jsp und fügen Sie clientlibs ein:

  1. Wählen Sie CRXDE Lite /libs/foundation/components/page/headlibs.jsp aus.

  2. Klicken Sie mit der rechten Maustaste und wählen Sie Kopieren aus (oder wählen Sie in der Symbolleiste die Option Kopieren aus).

  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 aus (oder wählen Sie in der Symbolleiste Einfügen aus).

  5. Doppelklicken Sie auf headlibs.jsp, um es zu öffnen.

  6. Hängen Sie die folgende Zeile an das Ende der Datei 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 überprüfen Sie, ob der Hintergrund kein Blau ist.

http://localhost:4502/content/an-scf-sandbox/en/play.html

chlimage_1-226

Speichern Sie Ihre Arbeit bisher

An dieser Stelle gibt es eine minimalistische Sandbox, und es kann sich lohnen, als Paket zu speichern, damit Sie während der Wiedergabe den Server deaktivieren, umbenennen oder löschen können, wenn Ihr Repository beschädigt wird und Sie ihn neu starten möchten, den Server einschalten, hochladen und installieren können, ohne diese grundlegenden Schritte wiederholen zu müssen.

Dieses Paket existiert im Tutorial Erstellen einer Beispielseite für diejenigen, die nicht warten können, einfach hineinzuspringen und mit dem Spielen zu beginnen…

So erstellen Sie ein Paket:

  • Klicken Sie in CRXDE Lite auf das Paketsymbol.

  • 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

      • Klicken Sie auf Filter hinzufügen
      • Stammpfad: <Durchsuchen Sie /apps/an-scf-sandbox>
      • Klicken Sie auf Fertig
      • Klicken Sie auf Filter hinzufügen
      • Stammpfad: <Durchsuchen Sie /etc/designs/an-scf-sandbox>
      • Klicken Sie auf Fertig
      • Klicken Sie auf Filter hinzufügen
      • Stammpfad: <Durchsuchen Sie /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 und Paket an einer anderen Stelle hochzuladen, und Mehr > Replizieren auswählen, um die Sandbox an eine localhost-Veröffentlichungsinstanz zu senden, um den Bereich Ihrer Sandbox zu erweitern.

Auf dieser Seite