Erstellen Sie die Komponenten

Das Beispiel zum Erweitern von Komponenten verwendet das Kommentarsystem, das eigentlich aus zwei Komponenten besteht

  • Kommentare - Das umgehende Kommentarsystem, bei dem es sich um die auf einer Seite platzierte Komponente handelt
  • Kommentar - Die Komponente, die eine Instanz eines veröffentlichten Kommentars erfasst

Beide Komponenten müssen eingerichtet werden, insbesondere wenn das Erscheinungsbild eines geposteten Kommentars angepasst werden soll.

HINWEIS

Pro Site-Seite ist nur ein Kommentarsystem zulässig.

Viele Communities-Funktionen beinhalten bereits ein Kommentarsystem, dessen resourceType geändert werden kann, um auf das erweiterte Kommentarsystem zu verweisen.

Erstellen der Kommentarkomponente

In diesen Anweisungen wird ein anderer Group-Wert als .hidden angegeben, damit die Komponente über den Komponenten-Browser (Sidekick) verfügbar gemacht werden kann.

Das Löschen der automatisch erstellten JSP-Datei erfolgt, weil stattdessen die Standard-HBS-Datei verwendet wird.

  1. Gehen Sie zu CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

  2. Erstellen Sie einen Speicherort für benutzerdefinierte Anwendungen:

    • Wählen Sie den Knoten /apps

      • Erstellen von Ordnern mit benutzerdefiniertem Namen
    • Wählen Sie den Knoten /apps/custom

      • Erstellen von Komponenten mit Ordnernamen
  3. Wählen Sie den Knoten /apps/custom/components

    • Erstellen > Komponente…

      • Beschriftung: Kommentare
      • Titel: Alt-Kommentare
      • Beschreibung: Alternativkommentar
      • Super Type: social/commons/components/hbs/comments
      • Gruppe: Benutzerdefiniert
    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Wählen Sie OK aus

  4. Erweitern Sie den soeben erstellten Knoten: /apps/custom/components/comments

  5. Wählen Sie Alle speichern

  6. Klicken Sie mit der rechten Maustaste auf comments.jsp

  7. Wählen Sie Löschen

  8. Wählen Sie Alle speichern

chlimage_1-70

Erstellen der untergeordneten Kommentarkomponente

Diese Anweisungen setzen Gruppe auf .hidden, da nur die übergeordnete Komponente in eine Seite einbezogen werden sollte.

Das Löschen der automatisch erstellten JSP-Datei erfolgt, weil stattdessen die Standard-HBS-Datei verwendet wird.

  1. Navigieren Sie zum Knoten /apps/custom/components/comments

  2. Klicken Sie mit der rechten Maustaste auf den Knoten

    • Wählen Sie Erstellen > Komponente…

      • Beschriftung: Kommentar
      • Titel: Alt-Kommentar
      • Beschreibung: Alternativer Kommentarstil
      • Super Type: social/commons/components/hbs/comments/comment
      • Gruppe: *.hidden*
    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Wählen Sie OK aus

  3. Erweitern Sie den soeben erstellten Knoten: /apps/custom/components/comments/comment

  4. Wählen Sie Alle speichern

  5. Klicken Sie mit der rechten Maustaste auf comment.jsp

  6. Wählen Sie Löschen

  7. Wählen Sie Alle speichern

chlimage_1-71 chlimage_1-72

Kopieren und Ändern der Standard-HBS-Skripte

Verwenden von CRXDE Lite:

  • Kopieren comments.hbs

  • Bearbeiten Sie comments.hbs nach:

    • Ändern Sie den Wert des Attributs data-scf-component (~line 20):

      • Von social/commons/components/hbs/comments
      • An /apps/custom/components/comments
    • Ändern Sie die Aufnahme der benutzerdefinierten Kommentarkomponente (~line 75):

      • Ersetzen {{include this resourceType='social/commons/components/hbs/comments/comment'}}
      • mit {{include this resourceType='/apps/custom/components/comments/comment'}}
  • Kopieren comment.hbs

  • Bearbeiten Sie comment.hbs nach:

    • Den Wert des Attributs data-scf-component (~ Zeile 19) ändern

      • Von social/commons/components/hbs/comments/comment
      • An /apps/custom/components/comments/comment
  • Knoten /apps/custom auswählen

  • Wählen Sie Alle speichern

Erstellen eines Client-Bibliotheksordners

Um zu vermeiden, dass diese Client-Bibliothek explizit einbezogen werden muss, könnte der Wert "Kategorien"für die clientlib des standardmäßigen Kommentarsystems verwendet werden ( cq.social.author.hbs.comments), aber dann würde diese clientlib auch für alle Instanzen der Standardkomponente enthalten sein.

Verwenden von CRXDE Lite:

  • Knoten /apps/custom/components/comments auswählen

  • Wählen Sie Knoten erstellen

    • Name: clientlibs

    • Typ: cq:ClientLibraryFolder

    • hinzufügen auf die Registerkarte Eigenschaften:

      • categories String NameTypeValue cq.social.author.hbs.comments Multi
      • dependencies String NameTypeValue cq.social.scf Multi
  • Wählen Sie Alle speichern

  • Wenn der Knoten /apps/custom/components/comments/clientlibs ausgewählt ist, erstellen Sie 3 Dateien:

    • Name: css.txt
    • Name: js.txt
    • Name: customommentsystem.js
  • Geben Sie als Inhalt von js.txt "customommentsystem.js"ein

  • Wählen Sie Alle speichern

chlimage_1-73

SCF-Modell und -Ansicht registrieren

Beim Erweitern (Überschreiben) einer SCF-Komponente ist resourceType anders (Überlagern verwendet den relativen Suchmechanismus, der /apps vor /libs durchsucht, sodass resourceType gleich bleibt). Daher müssen Sie JavaScript (in der Client-Bibliothek) schreiben, um das SCF JS-Modell und die Ansicht für den benutzerdefinierten resourceType zu registrieren.

Geben Sie den folgenden Text als Inhalt von customcommentsystem.js ein:

customommentsystem.js

(function($CQ, _, Backbone, SCF) {
    "use strict";
 
    var CustomComment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;
    var CustomCommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;

    var CustomCommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;
    var CustomCommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;
 
    SCF.registerComponent('/apps/custom/components/comments/comment', CustomComment, CustomCommentView);
    SCF.registerComponent('/apps/custom/components/comments', CustomCommentSystem, CustomCommentSystemView);

})($CQ, _, Backbone, SCF);
  • Wählen Sie Alle speichern

App veröffentlichen

Um die erweiterte Komponente in der Umgebung "Veröffentlichen"nutzen zu können, müssen Sie die benutzerdefinierte Komponente replizieren.

Eine Möglichkeit dazu ist

  • Aus globaler Navigation

    • Wählen Sie Werkzeuge > Bereitstellung > Replikation
    • Wählen Sie nun eine der folgenden Optionen aus Activate Tree
    • Setzen Sie Start Path: nach /apps/custom
    • Deaktivieren Sie Only Modified
    • Schaltfläche Activateauswählen

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