Dokumentation AEM 6.5 Communities-Anleitung

Erstellen der Komponenten create-the-components

Last update: Thu Oct 19 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:
Communities

Erstellt für:

User

Das Beispiel der Erweiterung von Komponenten verwendet das Kommentarsystem, das 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 bei der Anpassung des Erscheinungsbilds eines veröffentlichten Kommentars.

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.

Navigieren Sie zu CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
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
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
Erweitern Sie den erstellten Knoten: /apps/custom/components/comments
Klicken Sie auf Alle speichern
Klicken Sie mit der rechten Maustaste comments.jsp
Wählen Sie Löschen aus
Klicken Sie auf Alle speichern

create-component

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

Diese Anweisungen werden festgelegt 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.

Navigieren Sie zum /apps/custom/components/comments Knoten
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
Erweitern Sie den erstellten Knoten: /apps/custom/components/comments/comment
Klicken Sie auf Alle speichern
Klicken Sie mit der rechten Maustaste comment.jsp
Wählen Sie Löschen aus
Klicken Sie auf Alle speichern

create-child-component

create-component-crxde

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

Verwenden CRXDE Lite:

Kopieren comments.hbs
- Von /libs/social/commons/components/hbs/comments
- nach /apps/custom/components/comments
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
- Von /libs/social/commons/components/hbs/comments/comment
- nach /apps/custom/components/comments/comment
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 einbezogen werden muss, kann der Kategoriewert für die clientlib des standardmäßigen Kommentarsystems verwendet werden ( cq.social.author.hbs.comments). Diese clientlib muss dann jedoch auch für alle Instanzen der Standardkomponente eingeschlossen werden.

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 für den ausgewählten Knoten drei 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

comments-clientlibs

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

Beim Erweitern (Überschreiben) einer SCF-Komponente ist der resourceType anders (Überlagern verwendet 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 hierfür ist:

von der globalen Navigation aus,
- Auswählen Instrumente > Implementierung > Replikation
- Auswählen Baum aktivieren
- Start Path wird auf /apps/custom gesetzt
- Deaktivieren Nur geändert
- Auswählen Aktivieren button

recommendation-more-help

81e2cd9d-0789-409d-b87c-2a8ce4f28791