구성 요소 만들기

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

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

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

노트

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

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

주석 구성 요소 만들기

이러한 지침은 구성 요소 브라우저 에서 구성 요소를 사용할 수 있도록 다른 그룹 .hidden 값을 지정합니다(사이드 킥됨).

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

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

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

    • 노드 /apps 선택

      • 사용자 지정 폴더 만들기
    • 노드 /apps/custom 선택

      • 이름이 지정된 폴더 구성 요소 만들기
  3. 노드 /apps/custom/components 선택

    • 만들기 > 구성 요소…

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

    • 다음​을 선택합니다

    • 다음​을 선택합니다

    • 확인 선택

  4. 방금 생성된 노드를 확장합니다. /apps/custom/components/comments

  5. 모두 저장 선택

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

  7. 삭제 선택

  8. 모두 저장 선택

chlimage_1-70

하위 주석 구성 요소 만들기

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

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

  1. 노드를 /apps/custom/components/comments 탐색합니다.

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

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

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

    • 다음​을 선택합니다

    • 다음​을 선택합니다

    • 확인 선택

  3. 방금 생성된 노드를 확장합니다. /apps/custom/components/comments/comment

  4. 모두 저장 선택

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

  6. 삭제 선택

  7. 모두 저장 선택

chlimage_1-71

chlimage_1-72

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

CRXDE Lite 사용:

  • 복사 comments.hbs

    • 보낸 사람/libs/social/commons/components/hbs/comments
    • to/apps/custom/components/comments
  • 편집 comments.hbs 대상:

    • 속성(~line 20)의 data-scf-component 값을 변경합니다.

      • 시작 social/commons/components/hbs/comments
      • /apps/custom/components/comments
    • 사용자 지정 주석 구성 요소(~line 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
    • to/apps/custom/components/comments/comment
  • 편집 comment.hbs 대상:

    • data-scf-component 속성(~ line 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 cq.social.author.hbs.comments Multi
      • 이름 dependencies 유형 String cq.social.scf Multi
  • 모두 저장 선택

  • 노드 /apps/custom/components/comments/clientlib를 선택한 상태에서 3개의 파일을 만듭니다.

    • 이름: css.txt
    • 이름: js.txt
    • 이름:customcomments.js
  • 'customcomments system.js'를 js.txt

  • 모두 저장 선택

chlimage_1-73

SCF 모델 및 보기 등록

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

다음 텍스트를 컨텐츠로 입력합니다 customcommentsystem.js.

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

앱 게시

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

방법 중 하나는

  • 전역 탐색에서

    • Select Tools > Deployment > Replication
    • 트리 활성화 선택
    • 설정 Start Path 대상 /apps/custom
    • 수정된 항목만 선택 취소
    • 활성화 단추 선택

이 페이지에서는