구성 요소 확장에 대한 예제는 두 구성 요소로 구성된 주석 시스템을 사용합니다
게시된 댓글의 모양을 사용자 정의하는 경우 두 구성 요소를 모두 적절한 위치에 배치해야 합니다.
사이트 페이지당 하나의 주석 시스템만 허용됩니다.
많은 커뮤니티 기능에는 확장된 주석 시스템을 참조하도록 resourceType을 수정할 수 있는 주석 시스템이 이미 포함되어 있습니다.
이러한 지침에는 .hidden
이외의 Group 값을 지정하여 구성 요소 브라우저(사이드킥을)에서 구성 요소를 사용할 수 있도록 합니다.
자동 생성된 JSP 파일의 삭제는 기본 HBS 파일을 대신 사용하기 때문입니다.
CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)로 이동합니다.
사용자 정의 응용 프로그램의 위치를 만듭니다.
/apps
노드 선택
/apps/custom
노드 선택
/apps/custom/components
노드 선택
만들기 > 구성 요소…
다음을 선택합니다
다음을 선택합니다
다음을 선택합니다
확인 선택
방금 만든 노드를 확장합니다./apps/custom/components/comments
모두 저장 선택
comments.jsp
마우스 오른쪽 단추 클릭
삭제 선택
모두 저장 선택
이러한 지침은 상위 구성 요소만 페이지 내에 포함되도록 그룹을 .hidden
으로 설정합니다.
자동 생성된 JSP 파일의 삭제는 기본 HBS 파일을 대신 사용하기 때문입니다.
/apps/custom/components/comments
노드로 이동합니다.
노드를 마우스 오른쪽 단추로 클릭합니다.
만들기 > 구성 요소…를 선택합니다.
*.hidden*
다음을 선택합니다
다음을 선택합니다
다음을 선택합니다
확인 선택
방금 만든 노드를 확장합니다./apps/custom/components/comments/comment
모두 저장 선택
comment.jsp
마우스 오른쪽 단추 클릭
삭제 선택
모두 저장 선택
CRXDE Lite 사용:
복사 comments.hbs
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
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/clientlib
s 노드를 선택한 상태에서 3개의 파일을 만듭니다.
css.txt
js.txt
js.txt
의 컨텐츠로 'customcomments system.js'를 입력합니다.
모두 저장 선택
SCF 구성 요소를 확장(재정의)할 때 resourceType은 다릅니다(오버레이하면 resourceType이 동일하게 유지되도록 /apps
앞에서 <a0/>을(를) 검색하는 상대 검색 메커니즘을 사용할 수 있습니다). /libs
이 때문에 클라이언트 라이브러리에서 JavaScript를 작성하여 SCF JS 모델을 등록하고 사용자 지정 resourceType에 대해 확인해야 합니다.
다음 텍스트를 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);
게시 환경에서 확장 구성 요소를 경험하려면 사용자 지정 구성 요소를 복제해야 합니다.
한 가지 방법은 다음과 같습니다.
전역 탐색에서
Start Path
을(를) /apps/custom
(으)로 설정