구성 요소만들기

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

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

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

노트

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

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

주석 구성 요소만들기

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

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

  1. CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)로 이동합니다.

  2. 사용자 정의 응용 프로그램의 위치를 만듭니다.

    • /apps 노드 선택

      • 사용자 지정 폴더 만들기

    • /apps/custom 노드 선택

      • 이름이 지정된 구성 요소 만들기

  3. /apps/custom/components 노드 선택

    • 만들기 > 구성 요소…

      • 레이블: 주석
      • 제목: 대체 주석
      • 설명: 대체 주석 스타일
      • 슈퍼 유형: social/commons/components/hbs/comments
      • 그룹: 사용자 지정

    • 다음​을 선택합니다

    • 다음​을 선택합니다

    • 다음​을 선택합니다

    • 확인 선택

  4. 방금 만든 노드를 확장합니다./apps/custom/components/comments

  5. 모두 저장 선택

  6. comments.jsp 마우스 오른쪽 단추 클릭

  7. 삭제 선택

  8. 모두 저장 선택

create-component

하위 주석 구성 요소만들기

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

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

  1. /apps/custom/components/comments 노드로 이동합니다.

  2. 노드를 마우스 오른쪽 단추로 클릭합니다.

    • 만들기 > 구성 요소…를 선택합니다.

      • 레이블: 주석
      • 제목: 대체 주석
      • 설명: 대체 주석 스타일
      • 슈퍼 유형: social/commons/components/hbs/comments/comment
      • 그룹: *.hidden*

    • 다음​을 선택합니다

    • 다음​을 선택합니다

    • 다음​을 선택합니다

    • 확인 선택

  3. 방금 만든 노드를 확장합니다./apps/custom/components/comments/comment

  4. 모두 저장 선택

  5. comment.jsp 마우스 오른쪽 단추 클릭

  6. 삭제 선택

  7. 모두 저장 선택

create-child-component

create-component-crxde

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

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/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);
  • 모두 저장 선택

앱게시

게시 환경에서 확장 구성 요소를 경험하려면 사용자 지정 구성 요소를 복제해야 합니다.

한 가지 방법은 다음과 같습니다.

  • 전역 탐색에서

    • 도구 > 배포 > 복제​를 선택합니다.
    • 트리 활성화 선택
    • Start Path을(를) /apps/custom(으)로 설정
    • 수정된 항목만​의 선택을 취소합니다.
    • 활성화 단추 선택

이 페이지에서는