커뮤니티 구성 요소 안내서 community-components-guide

커뮤니티 구성 요소 안내서는 SCF(소셜 구성 요소 프레임워크)에 대한 대화형 개발 도구입니다. 사용 가능한 AEM(Adobe Experience Manager) 커뮤니티 구성 요소 목록 또는 여러 구성 요소로 구성된 보다 복잡한 기능을 제공합니다.

안내서에서는 각 구성 요소에 대한 기본 정보와 함께 SCF 구성 요소/기능의 작동 방식과 구성 또는 사용자 지정 방법에 대해 실험할 수 있습니다.

각 구성 요소와 관련된 개발 필수 요소에 대한 자세한 내용은 기능 및 구성 요소 필수 요소를 참조하십시오.

시작 getting-started

이 안내서는 작성자 인스턴스(localhost:4502) 및 게시 인스턴스(localhost:4503)의 개발 설치에 사용하기 위한 것입니다.

커뮤니티 구성 요소 사이트는에서 액세스할 수 있습니다.

커뮤니티 구성 요소와의 상호 작용은 다음에 따라 달라집니다.

작성자의 경우 편집 모드로 전환하려면 서버 이름 뒤에 editor.html 또는 cf#을(를) 첫 번째 경로 세그먼트로 삽입합니다.

홈 페이지 home-page

안내서에서는 페이지 왼쪽의 미리보기 및 프로토타이핑에 사용할 수 있는 SCF 구성 요소 목록을 제공합니다.

편집 모드에서 작성자 인스턴스에 표시된 구성 요소 안내서:

구성 요소 페이지 component-pages

페이지 왼쪽의 목록에서 구성 요소를 선택합니다.

안내서의 본문은 다음과 같습니다.

작성자 상호 작용 author-interactions

작성자 인스턴스에서 안내서를 사용할 때 대화 상자를 열어 구성 요소를 구성하는 경험을 할 수 있습니다. 개발자에 대한 정보는 설명서의 구성 요소 및 기능 기본 사항 섹션에 있으며, 대화 상자 설정은 작성자를 위한 커뮤니티 구성 요소 섹션에 설명되어 있습니다.

커뮤니티 구성 요소 안내서의 경우 일부 구성 요소 대화 상자 설정이 포함 가능 전환 상태로 오버레이됩니다. 기존 리소스를 사용하거나 동적으로 포함된 리소스를 사용하려면 편집 모드에서 구성 요소와 포함 가능한 텍스트를 모두 선택하고 두 번 클릭하여 편집 대화 상자를 엽니다.

템플릿 탭 아래:

Publish 상호 작용 publish-interactions

게시 인스턴스에서 안내서를 사용할 때 사이트 방문자(로그인되지 않음) 및 로그인 시 다양한 권한을 가진 구성원으로 구성 요소 및 기능을 경험할 수 있습니다.

클라이언트측 라이브러리 client-side-libraries

각 구성 요소에 대해 나열된 클라이언트측 라이브러리(clientlibs)는 구성 요소를 페이지에 배치할 때 참조되는 필수 ​입니다. clientlib은 브라우저에서 구성 요소를 렌더링하는 데 사용되는 JavaScript 및 CSS의 다운로드를 관리하고 최적화하는 수단을 제공합니다.

자세한 내용은 Clientlibs for Communities 구성 요소를 참조하십시오.

가장 impersonation

관리자 또는 개발자로 로그인한 경우가 많은 작성자 인스턴스에서 다른 사용자로 로그인한 구성 요소를 경험하려면 가장 단추 왼쪽에 있는 텍스트 상자를 사용하여 사용자 이름을 입력하거나 풀다운 목록에서 선택한 다음 단추를 클릭합니다. 로그아웃하고 가장을 종료하려면 되돌리기 를 클릭합니다.

게시 인스턴스는 가장할 필요가 없습니다. 로그인/로그아웃 링크를 사용하여 데모 사용자와 같은 다양한 사용자를 가장하기만 하면 됩니다.

사용자 지정 customization

활성화되면 구성 요소의 템플릿, CSS 및 데이터를 일시적으로 수정하여 가능한 사용자 정의를 프로토타이핑하는 데 각 SCF 구성 요소를 사용할 수 있습니다.

사용자 지정 활성화 enabling-customization

사용자 지정을 빠르게 실험하려면 구성 요소 페이지의 콘텐츠 JCR 노드에 scg:showIde 속성을 추가하고 true로 설정해야 합니다.

작성자 또는 게시 인스턴스에서 주석 구성 요소를 예로 사용하여 관리자 권한으로 로그인합니다.

템플릿 탭 templates-tab

템플릿 탭을 선택하여 구성 요소와 연관된 템플릿을 확인합니다.

템플릿 편집기 를 사용하여 로컬 편집 사항을 컴파일하고 저장소의 구성 요소에 영향을 주지 않고 페이지 상단의 샘플 구성 요소 인스턴스에 적용할 수 있습니다.

로컬 편집 내용에 대해 컴파일을 실행하면 거터에 점을 배치하고 텍스트를 빨간색으로 표시하여 오류가 강조 표시됩니다.

CSS 탭 css-tab

CSS 탭을 선택하여 구성 요소와 연관된 CSS를 확인합니다.

구성 요소가 여러 구성 요소로 구성된 경우 일부 CSS가 다른 구성 요소 중 하나에 나열될 수 있습니다.

CSS 편집기 를 사용하여 CSS를 수정하고 페이지 상단에 있는 샘플 구성 요소 인스턴스에 적용할 수 있습니다.

거터에서 규칙 옆에 있는 을 클릭하여 해당 규칙을 사용하여 DOM의 부분을 강조 표시하는 규칙을 선택할 수 있습니다.

데이터 탭 data-tab

데이터 탭을 선택하여 .social.json 엔드포인트 데이터를 표시합니다. 이 데이터는 편집할 수 있으며 샘플 구성 요소 인스턴스에 적용됩니다.

구문 오류는 거터에 표시되고 편집기에 강조 표시될 수 있습니다.