Clientlibs hinzufügen

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 dieser Client-Bibliothek übergebene Eigenschaftswert categories 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

add-client-library

Geben Sie auf der Registerkarte Eigenschaften 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. Klicken Sie mit der rechten Maustaste /etc/designs/an-scf-sandbox/clientlibs
  2. Wählen Sie Datei erstellen…
  3. Geben Sie Name: css.txt ein.
  4. Wählen Sie Datei erstellen…
  5. Geben Sie Name: js.txt ein.
  6. 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

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 werden viele der clientlibs hinzugefügt, 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 einfügen, z. B.

% ui:includeClientLib categories=cq.social.hbs.forum" %

In diesem Fall werden die grundlegenden 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 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

scf-clientlibs

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

scf-clientlibs-view

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:

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 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 Copy (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 Paste 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.

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

community-play

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 Ordner crx-quickstart/ deaktivieren, ihn hochladen und installieren können, wenn Ihr Repository beschädigt wird und Sie ihn neu starten möchten, den Server deaktivieren, umbenennen oder löschen, den Server einschalten, hochladen und installieren können und nicht diese grundlegendsten Schritte wiederholen 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 der CRXDE Lite auf das 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.

    • Registerkarte Filter auswählen

      • Klicken Sie auf Filter hinzufügen
      • Stammpfad: zu /apps/an-scf-sandbox navigieren
      • Klicken Sie auf Fertig
      • Klicken Sie auf Filter hinzufügen
      • Stammpfad: zu /etc/designs/an-scf-sandbox navigieren
      • Klicken Sie auf Fertig
      • Klicken Sie auf Filter hinzufügen
      • Stammpfad: zu /content/an-scf-sandbox** navigieren
      • 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