설명서AEM 6.4작성 안내서

디자인 모드에서 구성 요소 구성 configuring-components-in-design-mode

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

  • User
CAUTION
AEM 6.4가 확장 지원이 종료되었으며 이 설명서는 더 이상 업데이트되지 않습니다. 자세한 내용은 기술 지원 기간. 지원되는 버전 찾기 여기.

AEM 인스턴스가 바로 설치되면 구성 요소 브라우저에서 즉시 구성 요소를 선택할 수 있습니다.

이러한 구성 요소 외에도 다양한 기타 구성 요소를 사용할 수 있습니다. 디자인 모드를 사용하여 다음을 수행할 수 있습니다 이러한 구성 요소 활성화/비활성화. 활성화되어 사용자 페이지에 있으면 디자인 모드를 사용하여 다음을 수행할 수 있습니다 구성 요소 디자인의 여러 측면 구성 속성 매개 변수를 편집하여 다음을 수행합니다.

NOTE
이러한 구성 요소를 편집할 때는 세심한 주의를 기울여야 합니다. 디자인 설정은 전체 웹 사이트의 디자인에서 핵심적인 부분인 경우가 많으므로 적절한 권한 및 경험을 갖춘 작성자(예: 관리자 또는 개발자)만 이러한 설정을 변경해야 합니다. 자세한 내용은 구성 요소 개발 추가 정보.
NOTE
디자인 모드는 정적 템플릿에만 사용할 수 있습니다. 편집 가능한 템플릿으로 만든 템플릿은 템플릿 편집기.
NOTE
디자인 모드는 ()에 컨텐츠로 저장된 디자인 구성에만 사용할 수 있습니다. /etc).
AEM 6.4부터 아래의 구성 데이터로 디자인을 저장하는 것이 좋습니다. /apps 연속 배포 시나리오를 지원할 수 있습니다. 아래에 저장된 디자인 /apps 는 런타임 시 편집할 수 없으며 이러한 템플릿에 대해 관리자가 아닌 사용자는 디자인 모드를 사용할 수 없습니다.

이 작업에는 페이지의 단락 시스템에서 허용되는 구성 요소를 추가 또는 제거하는 작업이 포함됩니다. 단락 시스템 ( parsys)는 다른 모든 단락 구성 요소를 포함하는 복합 구성 요소입니다. 단락 시스템에는 다른 단락 구성 요소도 모두 포함되어 있으므로 작성자가 여러 유형의 구성 요소를 페이지에 추가할 수 있습니다. 각 단락 유형은 구성 요소로 표현됩니다.

예를 들어 제품 페이지의 컨텐츠에는 다음을 포함하는 단락 시스템이 있을 수 있습니다.

  • 제품의 이미지(이미지 또는 텍스트 이미지 단락 형태)
  • 제품 설명(텍스트 단락)
  • 기술 데이터가 있는 표(표 단락)
  • 사용자가 입력하는 양식(양식 시작, 양식 요소 및 양식 끝 단락)
NOTE
자세한 내용은 구성 요소 개발 및 템플릿 및 구성 요소 사용 지침 에 대한 자세한 정보 parsys.
CAUTION
정적 템플릿의 디자인을 정의할 때 이 문서에 설명된 대로 디자인 모드를 사용하여 디자인을 편집하는 것이 좋습니다
예를 들어, CRX DE에서 디자인을 수정하는 것은 좋지 않으며, 그러한 디자인의 애플리케이션은 예상 동작과 다를 수 있습니다. 개발자 문서를 참조하십시오 페이지 템플릿 - 정적 추가 정보.

구성 요소 활성화/비활성화 enable-disable-components

구성 요소를 활성화하거나 비활성화하려면:

  1. 을(를) 선택합니다 디자인 모드.

    screen_shot_2018-03-22at103113

  2. 구성 요소를 탭하거나 클릭합니다. 선택하면 구성 요소에 파란색 테두리가 표시됩니다.

    screen_shot_2018-03-22at103204

  3. 을 클릭하거나 탭합니다 상위 아이콘.

    이렇게 하면 현재 구성 요소가 포함된 단락 시스템이 선택됩니다.

  4. 다음 구성 단락 시스템의 아이콘이 상위 작업 표시줄에 표시됩니다.

    대화 상자를 표시하려면 이 옵션을 선택합니다.

  5. 이 대화 상자를 사용하여 현재 페이지를 편집할 때 구성 요소 브라우저에서 사용할 수 있는 구성 요소를 정의합니다.

    screen_shot_2018-03-22at103329

    대화 상자에는 다음과 같은 두 개의 탭이 있습니다.

    • 허용된 구성 요소
    • 설정

    허용된 구성 요소

    설정 허용된 구성 요소 탭에서 parsys에 사용할 수 있는 구성 요소를 정의합니다.

    • 구성 요소는 확장 및 축소할 수 있는 구성 요소 그룹별로 그룹화됩니다.
    • 그룹 이름을 확인하여 전체 그룹을 선택할 수 있으며 체크 표시를 해제하여 모든 그룹을 선택 취소할 수 있습니다.
    • 빼기 기호는 그룹의 모든 항목이 선택되어 있지 않은 하나 이상의 항목을 나타냅니다.
    • 이름별로 구성 요소를 필터링하는 데 검색을 사용할 수 있습니다.
    • 구성 요소 그룹 이름의 오른쪽에 나열된 숫자는 필터와 관계없이 해당 그룹에서 선택한 구성 요소의 총 수를 나타냅니다.

    페이지 구성 요소당 구성을 정의합니다. 하위 페이지에서 동일한 템플릿 및/또는 페이지 구성 요소(일반적으로 정렬됨)를 사용하는 경우 동일한 구성이 해당 단락 시스템에 적용됩니다.

    note note
    NOTE
    적응형 양식 구성 요소는 Forms 에코시스템을 활용하기 위해 적응형 양식 컨테이너 내에서 작동하도록 디자인되었습니다. 따라서 이러한 구성 요소는 적응형 양식 편집기에서만 사용해야 하며 사이트 페이지 편집기에서 작동하지 않습니다.

    설정

    설정 설정 탭에서는 각 구성 요소에 대한 앵커 그리기, 각 컨테이너의 셀 패딩 정의 등의 추가 옵션을 정의할 수 있습니다.

  6. 선택 완료 구성을 저장합니다.

구성 요소 디자인 구성 configuring-the-design-of-a-component

  1. 을(를) 선택합니다 디자인 모드.

    screen_shot_2018-03-22at103113-1

  2. 파란색 테두리가 있는 구성 요소를 탭하거나 클릭합니다. 이 예에서는 영웅 이미지 구성 요소가 선택됩니다.

    screen_shot_2018-03-22at103434

  3. 를 사용하십시오 구성 아이콘을 클릭하여 대화 상자를 엽니다.

    디자인 대화 상자에서 사용 가능한 디자인 매개 변수에 따라 구성 요소를 구성할 수 있습니다.

    screen_shot_2018-03-22at103530

    대화 상자에는 다음과 같은 세 개의 탭이 있습니다.

    • 기본
    • 기능
    • 스타일

    속성

    다음 속성 탭에서는 구성 요소의 중요한 디자인 매개 변수를 구성할 수 있습니다. 예를 들어 이미지 구성 요소의 경우 허용되는 이미지의 최대 및 최소 크기를 정의할 수 있습니다.

    기능

    다음 기능 탭에서는 구성 요소의 추가 기능을 활성화하거나 비활성화할 수 있습니다. 예를 들어 이미지 구성 요소의 경우 이미지의 방향, 자르기 옵션 및 이미지를 업로드할 수 있는 경우 정의할 수 있습니다.

    스타일

    다음 스타일 탭에서는 구성 요소에 사용할 CSS 클래스와 스타일을 정의할 수 있습니다.

    screen_shot_2018-03-22at103741

    를 사용하십시오 추가 여러 항목의 대화 상자 목록에 항목을 추가하는 단추.

    chlimage_1-94

    ​ 삭제 ​ 아이콘을 사용하여 여러 항목의 대화 상자 목록에서 항목을 제거합니다.

    를 사용하십시오 이동 아이콘을 사용하여 여러 항목의 대화 상자 목록에서 항목 순서를 재정렬할 수 있습니다.

  4. 을 클릭하거나 탭합니다 완료 아이콘을 클릭하여 대화 상자를 저장하고 닫습니다.

recommendation-more-help
5f6f1f67-8db1-40cb-84e9-024e65b9fc4c