구성 요소 만들기

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

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

두 구성 요소를 모두 배치해야 합니다. 특히 게시된 메모의 모양을 사용자 지정할 때 이러한 기능이 적용되어야 합니다.

노트

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

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

댓글 구성 요소 만들기

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

자동 생성된 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
    • 이름:customexsystem.js
  • js.txt의 콘텐츠로 'customcommentsystem.js'를 입력합니다.

  • 모두 저장 선택

comments-clientlibs

SCF 모델 및 보기 등록

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

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

customexsystem.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(으)로 설정
    • Only Modified​의 선택을 취소합니다.
    • 활성화 단추 선택

이 페이지에서는