DokumentationAEM 6.4Communities-Anleitung

Erstellen der Komponenten create-the-components

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • User
CAUTION
AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

Das Beispiel der Erweiterung von Komponenten verwendet das Kommentarsystem, das eigentlich aus zwei Komponenten besteht

  • Kommentare - Das umfassende 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 veröffentlichten Kommentars angepasst wird.

NOTE
Pro Site-Seite ist nur ein Kommentarsystem zulässig.
Viele Communities-Funktionen enthalten bereits ein Kommentarsystem, dessen resourceType so geändert werden kann, dass er auf das erweiterte Kommentarsystem verweist.

Erstellen der Kommentarkomponente create-the-comments-component

Diese Anweisungen geben eine Gruppe Wert, der .hidden sodass die Komponente über den Komponenten-Browser (Sidekick) verfügbar gemacht werden kann.

Das Löschen der automatisch erstellten JSP-Datei erfolgt dadurch, dass stattdessen die standardmäßige HBS-Datei verwendet wird.

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

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

    • Wählen Sie den /apps-Knoten aus

      • Ordner erstellen benannt custom

    • Wählen Sie den /apps/custom-Knoten aus

      • Ordner erstellen benannt Komponenten

  3. Wählen Sie den /apps/custom/components-Knoten aus

    • Erstellen > Komponente…

      • Titel: Kommentare
      • Titel: Alt-Kommentare
      • Beschreibung: Alternativer Kommentar-Stil
      • Supertyp: 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. Klicken Sie auf Alle speichern

  6. Klicken Sie mit der rechten Maustaste comments.jsp

  7. Wählen Sie Löschen aus

  8. Klicken Sie auf Alle speichern

chlimage_1-70

Erstellen der Komponente für untergeordnete Kommentare create-the-child-comment-component

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

Das Löschen der automatisch erstellten JSP-Datei erfolgt dadurch, dass stattdessen die standardmäßige HBS-Datei verwendet wird.

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

  2. Rechtsklick auf den Knoten

    • Auswählen Erstellen > Komponente…

      • Titel: comment
      • Titel: Alt-Kommentar
      • Beschreibung: Alternativer Kommentarstil
      • Supertyp: 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. Klicken Sie auf Alle speichern

  5. Klicken Sie mit der rechten Maustaste comment.jsp

  6. Wählen Sie Löschen aus

  7. Klicken Sie auf Alle speichern

chlimage_1-71 chlimage_1-72

Kopieren und Ändern der standardmäßigen HBS-Skripte copy-and-modify-the-default-hbs-scripts

Verwenden CRXDE Lite:

  • Kopieren comments.hbs

  • Bearbeiten comments.hbs an:

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

      • Von social/commons/components/hbs/comments
      • An /apps/custom/components/comments

    • Nehmen Sie die benutzerdefinierte Kommentarkomponente (~line 75) auf:

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

  • Kopieren comment.hbs

  • Bearbeiten comment.hbs an:

    • Ändern Sie den Wert des data-scf-component -Attributs (~ Zeile 19)

      • Von social/commons/components/hbs/comments/comment
      • An /apps/custom/components/comments/comment

  • Auswählen /apps/custom Knoten

  • Klicken Sie auf Alle speichern

Erstellen eines Client-Bibliotheksordners create-a-client-library-folder

Um zu vermeiden, dass diese Client-Bibliothek explizit einbezogen werden muss, kann der Kategoriewert für die clientlib des Standard-Kommentarsystems verwendet werden ( cq.social.author.hbs.comments), aber dann würde diese clientlib auch für alle Instanzen der Standardkomponente einbezogen.

Verwenden CRXDE Lite:

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

  • Auswählen Knoten erstellen

    • Name: clientlibs

    • Typ: cq:ClientLibraryFolder

    • Hinzufügen zu Eigenschaften tab:

      • Name categories Typ String Wert cq.social.author.hbs.comments Multi
      • Name dependencies Typ String Wert cq.social.scf Multi

  • Klicken Sie auf Alle speichern

  • Mit /apps/custom/components/comments/clientlibErstellen Sie als ausgewählten Knoten 3 Dateien:

    • Name: css.txt
    • Name: js.txt
    • Name: customkommentssystem.js

  • Geben Sie "customommentssystem.js"als Inhalt von ein. js.txt

  • Klicken Sie auf Alle speichern

chlimage_1-73

Registrieren des SCF-Modells und Anzeigen register-the-scf-model-view

Beim Erweitern (Überschreiben) einer SCF-Komponente ist resourceType anders (Überlagern nutzt den relativen Suchmechanismus, der durchsucht wird) /apps before /libs sodass der resourceType gleich bleibt). Daher ist es erforderlich, JavaScript (in der Client-Bibliothek) zu schreiben, um das SCF-JS-Modell zu registrieren und für den benutzerdefinierten resourceType anzuzeigen.

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

customcommentsystem.js customcommentsystem-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);
  • Klicken Sie auf Alle speichern

App veröffentlichen publish-the-app

Um die erweiterte Komponente in der Veröffentlichungsumgebung zu erleben, muss die benutzerdefinierte Komponente repliziert werden.

Eine Möglichkeit ist, dies zu tun

  • Aus globaler Navigation

    • Auswählen Tools > Bereitstellung > Replikation
    • Klicken Sie auf Activate Tree
    • Satz Start Path: nach /apps/custom
    • Deaktivieren Only Modified
    • Auswählen Activatebutton
recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6