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 clientlib direkt von einer Inhaltsseite einzuschließen oder es in andere clientlibs einzubetten.

  1. Erweitern Sie CRXDE Lite/etc/designs

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

    • Name : clientlibs
    • Typ : cq:ClientLibraryFolder
  3. Klicken Sie auf OK

add-client-library

Geben Sie auf der Registerkarte Properties für den neuen Knoten clientlibs 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.txt- und css.txt-Dateien. (Es handelt sich nicht offiziell um cq:ClientLibraryFolder ohne diese.)

  1. Klicken Sie mit der rechten Maustaste /etc/designs/an-scf-sandbox/clientlibs
  2. Wählen Sie Datei erstellen…
  3. Name: css.txt
  4. Wählen Sie Datei erstellen…
  5. Name: js.txt
  6. Klicken Sie auf Alle speichern

clientlibs-css

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 Knoten clientlibs die String-Eigenschaft 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 erscheint ein Dialog,
      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-Ansicht

Clientlibs in PlayPage-Vorlage einschließen

Ohne die apps.an-scf-sandbox ClientLibraryFolder-Kategorie auf der Seite einschließen zu müssen, 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:

clientlibs-comment

Sobald apps.an-scf-sandbox clientlibs enthalten ist, wird die Komponente "SCF-Kommentare"mit einem Stil angezeigt:

clientlibs-comment-styled

Die include-Anweisung gehört zum Abschnitt head des Skripts html. 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. Wählen Sie CRXDE Lite /libs/foundation/components/page/headlibs.jsp

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

  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 Einfügen)

  5. Dublette-Klicken 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?lang=de" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp?lang=de"/>
<% 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.

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

community-play

Speichern Ihrer Arbeit bisher

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 Eine Beispielseite erstellen für diejenigen, die nicht darauf warten können, einfach hineinzuspringen und Beginn spielen!..

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

  • Klicken Sie auf Erstellen

Jetzt können Sie Download auswählen, um es auf Festplatte und Paket hochladen an einer anderen Stelle zu speichern, und Mehr > Replizieren wählen, um die Sandbox auf eine localhost-Veröffentlichungsinstanz zu verschieben, um den Bereich Ihrer Sandbox zu erweitern.

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now