Erstellen der Komponenten create-the-components

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

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 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 Knoten /apps aus

      • Ordner mit dem Namen custom erstellen
    • Wählen Sie den Knoten /apps/custom aus

      • Ordner mit dem Namen Komponenten erstellen
  3. Wählen Sie den Knoten /apps/custom/components aus

    • Erstellen > Komponente…

      • Beschriftung: Kommentare
      • Titel: ALT-Kommentare
      • Beschreibung: Alternativer Kommentar-Stil
      • Supertyp: social/commons/components/hbs/comments
      • Gruppe: Benutzerdefiniert
    • Wählen Sie Weiter

    • Wählen Sie Weiter

    • Wählen Sie Weiter

    • Wählen Sie OK aus.

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

  5. Wählen Sie Alle speichern

  6. Rechtsklick auf comments.jsp

  7. Wählen Sie Löschen aus

  8. Wählen Sie Alle speichern

create-component

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

In diesen Anweisungen wird Gruppe auf .hidden gesetzt, 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 Knoten /apps/custom/components/comments .

  2. Rechtsklick auf den Knoten

    • Wählen Sie Erstellen > Komponente… aus.

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

    • Wählen Sie Weiter

    • Wählen Sie Weiter

    • Wählen Sie OK aus.

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

  4. Wählen Sie Alle speichern

  5. Rechtsklick auf comment.jsp

  6. Wählen Sie Löschen aus

  7. Wählen Sie Alle speichern

create-child-component

create-component-crxde

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

Verwenden von CRXDE Lite:

  • Kopieren comments.hbs

  • Bearbeiten Sie comments.hbs zu:

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

      • Von social/commons/components/hbs/comments
      • Bis /apps/custom/components/comments
    • Nehmen Sie die benutzerdefinierte Kommentarkomponente (~line 75) auf:

      • Ersetzen Sie {{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 zu:

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

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

  • Wählen Sie 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 von CRXDE Lite:

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

  • Wählen Sie Knoten erstellen aus

    • Name: clientlibs

    • Typ: cq:ClientLibraryFolder

    • Fügen Sie der Registerkarte Eigenschaften hinzu:

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

  • Erstellen Sie bei ausgewähltem Knoten /apps/custom/components/comments/clientlibdrei Dateien:

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

  • Wählen Sie 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 durch /apps vor /libs sucht, 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 den folgenden Text als Inhalt von customcommentsystem.js ein:

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);
  • Wählen Sie Alle speichern

Publish the App 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,

    • Wählen Sie Tools > Bereitstellung > Replikation aus.
    • Wählen Sie Baum aktivieren
    • Start Path wird auf /apps/custom gesetzt
    • Deaktivieren Sie Nur geändert .
    • Schaltfläche Aktivieren auswählen
recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791