Dokumentation AEM 6.4 Användarhandbok om Communities

Skapa komponenterna create-the-components

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

Ämnen:
Communities

Skapat för:

User

CAUTION

AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

Exemplet med utökade komponenter använder kommentarsystemet, som i själva verket 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 komponenten Kommentarer create-the-comments-component

I de här riktningarna anges Grupp annat ä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.

Bläddra till CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
Skapa en plats för anpassade program:
- Välj /apps nod
  - Skapa mapp namngiven custom
- Välj /apps/custom nod
  - Skapa mapp namngiven components
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
Expandera noden som nyss skapades: /apps/custom/components/comments
Välj Save All
Högerklicka comments.jsp
Välj Delete
Välj Save All

chlimage_1-70

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.

Navigera till /apps/custom/components/comments nod
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
Expandera noden som nyss skapades: /apps/custom/components/comments/comment
Välj Save All
Högerklicka comment.jsp
Välj Delete
Välj Save All

chlimage_1-71 chlimage_1-72

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

Använda CRXDE Lite:

Kopiera comments.hbs
- Från /libs/social/Commons/components/hbs/comments
- Till /apps/custom/components/comments
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
- Från /libs/social/commons/components/hbs/comments/comment
- Till /apps/custom/components/comments/comment
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 explicit inkludera det här klientbiblioteket kan kategorivärdet för standardkommentarsystemets klientlib användas ( cq.social.author.hbs.comments), men sedan inkluderas klientlib även 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 3 filer:
- Namn: css.txt
- Namn: js.txt
- Namn: customcommentsystem.js
Ange 'customcommentsystem.js' som innehåll i js.txt
Välj Save All

chlimage_1-73

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ökfunktionen som söker igenom /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

För att den utökade komponenten ska fungera i publiceringsmiljön måste den anpassade komponenten replikeras.

Ett sätt att göra detta ä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 Activateknapp

recommendation-more-help

5d37d7b0-a330-461b-814d-068612705ff6