DokumentationAEM 6.5Användarhandbok om Communities

Skapa komponenterna create-the-components

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

Skapat för:

  • User

Exemplet med utökade komponenter använder kommentarsystemet, som består av två komponenter.

  • Kommentarer - Det övergripande kommentarsystemet, som är den komponent som placeras på en sida.
  • Kommentar - Komponenten som hämtar en instans av en publicerad kommentar.

Båda komponenterna måste installeras, särskilt om du anpassar utseendet på en publicerad kommentar.

NOTE
Endast ett kommentarssystem per webbplatssida tillåts.
Många webbgruppsfunktioner innehåller redan ett kommentarssystem vars resourceType kan ändras för att referera till det utökade kommentarsystemet.

Skapa kommentarskomponenten create-the-comments-component

I dessa anvisningar anges Grupp annat värde än .hidden så att komponenten kan göras tillgänglig från komponentens webbläsare (sidospark).

Borttagningen av den automatiskt skapade JSP-filen beror på att HBS-standardfilen används i stället.

  1. Bläddra till CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

  2. Skapa en plats för anpassade program:

    • Välj /apps nod

      • Skapa mapp namngiven custom

    • Välj /apps/custom nod

      • Skapa mapp namngiven components

  3. Välj /apps/custom/components nod

    • Create > Component…

      • Etikett: kommentarer
      • Titel: Alt-kommentarer
      • Beskrivning: Format för alternativa kommentarer
      • Supertyp: social/gemensam/komponent/hbs/comments
      • Grupp: Egen

    • Välj Next

    • Välj Next

    • Välj Next

    • Välj OK

  4. Expandera noden som skapades: /apps/custom/components/comments

  5. Välj Save All

  6. Högerklicka comments.jsp

  7. Välj Delete

  8. Välj Save All

create-component

Skapa den underordnade kommentarskomponenten create-the-child-comment-component

De här riktningarna har angetts Grupp till .hidden eftersom endast den överordnade komponenten ska inkluderas på en sida.

Borttagningen av den automatiskt skapade JSP-filen beror på att HBS-standardfilen används i stället.

  1. Navigera till /apps/custom/components/comments nod

  2. Högerklicka på noden

    • Välj Create > Component…

      • Etikett: kommentar
      • Titel: Alt-kommentar
      • Beskrivning: Alternativ kommentarsstil
      • Supertyp: social/gemensam/komponent/hbs/comments/comment
      • Grupp: *.hidden*

    • Välj Next

    • Välj Next

    • Välj Next

    • Välj OK

  3. Expandera noden som skapades: /apps/custom/components/comments/comment

  4. Välj Save All

  5. Högerklicka comment.jsp

  6. Välj Delete

  7. Välj Save All

create-child-component

create-component-crxde

Kopiera och ändra standard-HBS-skript copy-and-modify-the-default-hbs-scripts

Använda CRXDE Lite:

  • Kopiera comments.hbs

  • Redigera comments.hbs till:

    • Ändra värdet för data-scf-component attribute (~line 20):

      • Från social/commons/components/hbs/comments
      • Till /apps/custom/components/comments

    • Ändra om du vill ta med den anpassade kommentarkomponenten (~line 75):

      • Ersätt {{include this resourceType='social/commons/components/hbs/comments/comment'}}
      • Med {{include this resourceType='/apps/custom/components/comments/comment'}}

  • Kopiera comment.hbs

  • Redigera comment.hbs till:

    • Ändra värdet på data-scf-component-attributet (~ line 19)

      • Från social/commons/components/hbs/comments/comment
      • Till /apps/custom/components/comments/comment

  • Välj /apps/custom nod

  • Välj Save All

Skapa en biblioteksmapp för klient create-a-client-library-folder

För att undvika att ta med det här klientbiblioteket kan kategorivärdet för standardkommentarsystemets klientlib användas ( cq.social.author.hbs.comments). Klientlib måste då också inkluderas för alla instanser av standardkomponenten.

Använda CRXDE Lite:

  • Välj /apps/custom/components/comments nod

  • Välj Create Node

    • Namn: clientlibs

    • Typ: cq:ClientLibraryFolder

    • Lägg till i Properties tab:

      • Namn categories Typ String Värde cq.social.author.hbs.comments Multi
      • Namn dependencies Typ String Värde cq.social.scf Multi

  • Välj Save All

  • Med /apps/custom/components/comments/clientlibNär noden är markerad skapar du tre filer:

    • Namn: css.txt
    • Namn: js.txt
    • Namn: customcommentsystem.js

  • Ange 'customcommentsystem.js' som innehåll i js.txt

  • Välj Save All

comments-clientlibs

Registrera SCF-modellen och vyn register-the-scf-model-view

När du utökar (åsidosätter) en SCF-komponent är resourceType annorlunda (overlay använder den relativa sökmekanism som genomsöker /apps före /libs så att resourceType förblir densamma). Därför måste du skriva JavaScript (i klientbiblioteket) för att registrera SCF JS-modellen och visa för den anpassade resourceType.

Ange följande text som innehåll i 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);
  • Välj Save All

Publicera appen publish-the-app

Om du vill använda den utökade komponenten i publiceringsmiljön måste du replikera den anpassade komponenten.

Ett sätt är att

  • Från global navigering

    • Välj Tools > Deployment > Replication
    • Välj Activate Tree
    • Ange Start Path till /apps/custom
    • Avmarkera Only Modified
    • Välj Activate knapp
recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791