hinzufügen Clientlibs

hinzufügen eines ClientLibraryFolder (clientlibs)

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

Der categoriesEigenschaftswert, 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

chlimage_1-220

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 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. 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

chlimage_1-221

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

#base=.
 style.css

Erstellen Sie dann eine Datei unter clientlibs mit dem Namen 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 "String mit mehreren Werten" embed ein. Dadurch werden die erforderlichen clientseitigen Bibliotheken (clientlibs) für SCF-Komponenteneingebettet. Für dieses Tutorial fügen wir viele clientlibs hinzu, 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-Kategorien=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

chlimage_1-222

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

chlimage_1-223

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:

chlimage_1-224

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

chlimage_1-225

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 klicken Sie auf headlibs.jsp , um sie 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.

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

chlimage_1-226

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 Beginn zu beenden wünschen, Ihren Server ausschalten, umbenennen oder löschen können, den Server einschalten, das gespeicherte Paket hochladen und installieren können und diese grundlegenden Schritte nicht 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

    • 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.

Auf dieser Seite