DokumentationAEM 6.5Användarhandbok om Communities

Skapa komponenterna create-the-components

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Utvecklare

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 de här riktningarna anges ett annat Group-värde än .hidden så komponenten kan göras tillgänglig från komponentwebbläsaren (sidespark).

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:

    • Markera noden /apps

      • Skapa mapp med namnet custom

    • Markera noden /apps/custom

      • Skapa mapp med namnet components

  3. Markera noden /apps/custom/components

    • Create > Component…

      • Etikett: kommentarer
      • Titel: Alt-kommentarer
      • Beskrivning: Format för alternativa kommentarer
      • Supertyp: social/Commons/components/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 på 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 instruktionerna anger Grupp till .hidden eftersom bara 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 noden /apps/custom/components/comments

  2. Högerklicka på noden

    • Välj Create > Component…

      • Etikett: kommentar
      • Titel: Alt-kommentar
      • Beskrivning: Alternativt kommentarformat
      • Supertyp: social/Commons/components/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 på 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änder CRXDE Lite:

  • Kopiera comments.hbs

  • Redigera comments.hbs till:

    • Ändra värdet för attributet data-scf-component (~rad 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

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

Använder CRXDE Lite:

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

  • Välj Create Node

    • Namn: clientlibs

    • Typ: cq:ClientLibraryFolder

    • Lägg till på fliken Properties:

      • 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

  • Skapa tre filer med noden /apps/custom/components/comments/clientlib markerad:

    • 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 för 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

Publish i 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 knappen Activate
recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791