구성 요소 만들기

구성 요소 확장에 대한 예제는 두 구성 요소로 구성된 주석 시스템을 사용합니다

주석 - 페이지에 배치된 구성 요소인 주석 시스템입니다.
댓글 - 게시된 댓글의 인스턴스를 캡처하는 구성 요소입니다.

게시된 댓글의 모양을 사용자 정의하는 경우 두 구성 요소를 모두 적절한 위치에 배치해야 합니다.

노트

사이트 페이지당 하나의 주석 시스템만 허용됩니다.

많은 커뮤니티 기능에는 확장된 주석 시스템을 참조하도록 resourceType을 수정할 수 있는 주석 시스템이 이미 포함되어 있습니다.

주석 구성 요소 만들기

이러한 지침에는 .hidden 이외의 Group 값을 지정하여 구성 요소 브라우저(사이드킥을)에서 구성 요소를 사용할 수 있도록 합니다.

자동 생성된 JSP 파일의 삭제는 기본 HBS 파일을 대신 사용하기 때문입니다.

CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)로 이동합니다.
사용자 정의 응용 프로그램의 위치를 만듭니다.
- /apps 노드 선택
  - 사용자 지정 폴더 만들기
- /apps/custom 노드 선택
  - 이름이 지정된 구성 요소 만들기
/apps/custom/components 노드 선택
- 만들기 > 구성 요소…
  - 레이블: 주석
  - 제목: 대체 주석
  - 설명: 대체 주석 스타일
  - 슈퍼 유형: social/commons/components/hbs/comments
  - 그룹: 사용자 지정
- 다음을 선택합니다
- 다음을 선택합니다
- 다음을 선택합니다
- 확인 선택
방금 만든 노드를 확장합니다./apps/custom/components/comments
모두 저장 선택
comments.jsp 마우스 오른쪽 단추 클릭
삭제 선택
모두 저장 선택

create-component

하위 주석 구성 요소 만들기

이러한 지침은 상위 구성 요소만 페이지 내에 포함되도록 그룹을 .hidden으로 설정합니다.

자동 생성된 JSP 파일의 삭제는 기본 HBS 파일을 대신 사용하기 때문입니다.

/apps/custom/components/comments 노드로 이동합니다.
노드를 마우스 오른쪽 단추로 클릭합니다.
- 만들기 > 구성 요소…를 선택합니다.
  - 레이블: 주석
  - 제목: 대체 주석
  - 설명: 대체 주석 스타일
  - 슈퍼 유형: social/commons/components/hbs/comments/comment
  - 그룹: *.hidden*
- 다음을 선택합니다
- 다음을 선택합니다
- 다음을 선택합니다
- 확인 선택
방금 만든 노드를 확장합니다./apps/custom/components/comments/comment
모두 저장 선택
comment.jsp 마우스 오른쪽 단추 클릭
삭제 선택
모두 저장 선택

create-child-component

create-component-crxde

기본 HBS 스크립트 복사 및 수정

CRXDE Lite 사용:

복사 comments.hbs
- 보낸 사람: /libs/social/commons/components/hbs/comments
- /apps/custom/components/comments
comments.hbs 편집 대상:
- data-scf-component 특성(~20행) 값을 변경합니다.
  - 시작 social/commons/components/hbs/comments
  - 끝 /apps/custom/components/comments
- 사용자 지정 주석 구성 요소(~75)를 포함하도록 수정합니다.
  - 바꾸기 {{include this resourceType='social/commons/components/hbs/comments/comment'}}
  - 사용 {{include this resourceType='/apps/custom/components/comments/comment'}}
복사 comment.hbs
- 보낸 사람: /libs/social/commons/components/hbs/comments/comment
- /apps/custom/components/comments/comment
comment.hbs 편집 대상:
- data-scf-component 속성(~ 행 19) 값 변경
  - 시작 social/commons/components/hbs/comments/comment
  - 끝 /apps/custom/components/comments/comment
/apps/custom 노드 선택
모두 저장 선택

클라이언트 라이브러리 폴더 만들기

이 클라이언트 라이브러리를 명시적으로 포함할 필요가 없도록 기본 주석 시스템의 clientlib에 대한 범주 값을 사용할 수 있습니다( cq.social.author.hbs.comments). 그러나 이 clientlib은 기본 구성 요소의 모든 인스턴스에 포함됩니다.

CRXDE Lite 사용:

/apps/custom/components/comments 노드 선택
노드 만들기를 선택합니다.
- 이름: clientlibs
- 유형: cq:ClientLibraryFolder
- 속성 탭에 추가:
  - categories String NameTypeValue cq.social.author.hbs.comments Multi
  - dependencies String NameTypeValue cq.social.scf Multi
모두 저장 선택
/apps/custom/components/comments/clientlibs 노드를 선택한 상태에서 3개의 파일을 만듭니다.
- 이름: css.txt
- 이름: js.txt
- 이름:customsystem.js
js.txt의 컨텐츠로 'customcomments system.js'를 입력합니다.
모두 저장 선택

comments-clientlibs

SCF 모델 등록 및 보기

SCF 구성 요소를 확장(재정의)할 때 resourceType은 다릅니다(오버레이하면 resourceType이 동일하게 유지되도록 /apps 앞에서 <a0/>을(를) 검색하는 상대 검색 메커니즘을 사용할 수 있습니다). /libs 이 때문에 클라이언트 라이브러리에서 JavaScript를 작성하여 SCF JS 모델을 등록하고 사용자 지정 resourceType에 대해 확인해야 합니다.

다음 텍스트를 customcommentsystem.js의 내용으로 입력합니다.

customsystem.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);