콘텐츠 조각 모델 정의 content-fragment-models

이 장에서는 콘텐츠 조각 모델 ​을(를) 사용하여 콘텐츠를 모델링하고 스키마를 구축하는 방법을 알아봅니다. 모델의 일부로 스키마를 정의하는 데 사용할 수 있는 다양한 데이터 유형에 대해 알아봅니다.

​과(와) 사람, 두 개의 간단한 모델을 만듭니다. Team 데이터 모델에 이름, 약식 이름 및 설명이 있으며 전체 이름, 생체 정보, 프로필 사진 및 직업 목록이 있는 Person 데이터 모델을 참조합니다.

또한 기본 단계에 따라 나만의 모델을 만들고 GraphQL 쿼리 및 React 앱 코드와 같은 각 단계를 조정하거나 이러한 장에 설명된 단계를 따를 수도 있습니다.

사전 요구 사항 prerequisites

여러 부분으로 구성된 자습서이며 AEM 작성자 환경을 사용할 수 있다고 가정합니다.

목표 objectives

  • 콘텐츠 조각 모델을 만듭니다.
  • 모델 구축에 사용할 수 있는 데이터 유형 및 유효성 검사 옵션을 식별합니다.
  • 콘텐츠 조각 모델에서 콘텐츠 조각에 대한 데이터 스키마와 작성 템플릿을 모두 ​정의하는 방법을 이해합니다.

프로젝트 구성 만들기

프로젝트 구성은 특정 프로젝트와 관련된 모든 콘텐츠 조각 모델을 포함하며 모델을 구성하는 수단을 제공합니다. 콘텐츠 조각 모델을 만들기 전에 하나 이상의 프로젝트를 만들어야 합니다.

  1. AEM 작성자 환경에 로그인합니다(예: https://author-pYYYY-eXXXX.adobeaemcloud.com/).

  2. AEM 시작 화면에서 도구 > 일반 > 구성 브라우저 ​로 이동합니다.

    구성 브라우저로 이동

  3. 오른쪽 상단에서 만들기 ​를 클릭합니다.

  4. 그 결과로 표시되는 대화 상자에서 다음을 입력합니다.

    • 제목*: 내 프로젝트
    • 이름*: my-project(하이픈을 사용하는 모든 소문자를 사용하여 단어를 구분합니다. 이 문자열은 클라이언트 애플리케이션이 요청을 수행하는 고유한 GraphQL 엔드포인트에 영향을 줍니다.)
    • 콘텐츠 조각 모델 확인
    • GraphQL 영구 쿼리 확인

    내 프로젝트 구성

콘텐츠 조각 모델 만들기

그런 다음 ​과(와) 사람 ​에 대해 두 개의 모델을 만듭니다.

개인 모델 만들기

팀에 속한 사람을 나타내는 데이터 모델인 Person ​에 대한 모델을 만드십시오.

  1. AEM 시작 화면에서 도구 > 일반 > 콘텐츠 조각 모델 ​로 이동합니다.

    콘텐츠 조각 모델로 이동

  2. 내 프로젝트 폴더로 이동합니다.

  3. 오른쪽 상단의 만들기 ​를 탭하여 모델 만들기 마법사를 표시합니다.

  4. 모델 제목 필드에 사람 ​을 입력하고 만들기 ​를 탭합니다. 결과 대화 상자에서 열기 ​를 탭하여 모델을 만듭니다.

  5. 한 줄 텍스트 요소를 기본 패널로 끌어서 놓습니다. 속성 탭에서 다음 속성을 입력하십시오.

    • 필드 레이블: 전체 이름
    • 속성 이름: fullName
    • 필수 확인

    전체 이름 속성 필드

    속성 이름 ​은(는) AEM에 유지되는 속성의 이름을 정의합니다. 속성 이름 ​은(는) 이 속성의 이름도 데이터 스키마의 일부로 정의합니다. 이 ​은(는) 콘텐츠 조각 데이터가 GraphQL API를 통해 노출될 때 사용됩니다.

  6. 데이터 형식 탭을 탭하고 전체 이름 필드 아래에 여러 줄 텍스트 필드를 끌어서 놓습니다. 다음 속성을 입력합니다.

    • 필드 레이블: 전기
    • 속성 이름: biographyText
    • 기본 형식: 서식 있는 텍스트
  7. 데이터 형식 탭을 클릭하고 콘텐츠 참조 필드를 끌어서 놓습니다. 다음 속성을 입력합니다.

    • 필드 레이블: 프로필 사진
    • 속성 이름: profilePicture
    • 루트 경로: /content/dam

    루트 경로 ​를 구성할 때 폴더 아이콘을 클릭하여 경로를 선택하는 모달을 표시할 수 있습니다. 이로 인해 작성자가 경로를 채우는 데 사용할 수 있는 폴더가 제한됩니다. /content/dam은(는) 모든 AEM Assets(이미지, 비디오, 기타 콘텐츠 조각)가 저장되는 루트입니다.

  8. 이미지 ​의 콘텐츠 형식만 사용하여 필드를 채울 수 있도록 그림 참조 ​에 유효성 검사를 추가하십시오.

    이미지로 제한

  9. 데이터 형식 탭을 클릭하고 그림 참조 필드 아래에 열거형 데이터 형식을 끌어서 놓습니다. 다음 속성을 입력합니다.

    • 다른 이름으로 렌더링: 확인란
    • 필드 레이블: 직업
    • 속성 이름: occupation
  10. 옵션 추가 단추를 사용하여 옵션 ​을(를) 여러 개 추가하십시오. 옵션 레이블옵션 값 ​에 동일한 값을 사용합니다.

    아티스트, 영향력 있는 사용자, 사진사, 여행자, 작가, 유튜버

  11. 최종 사용자 모델은 다음과 같아야 합니다.

    최종 사용자 모델

  12. 변경 내용을 저장하려면 저장 ​을 클릭하세요.

팀 모델 만들기

사람 팀의 데이터 모델인 ​의 모델을 만드십시오. 팀 모델은 팀 구성원을 나타내는 개인 모델을 참조합니다.

  1. 내 프로젝트 폴더에서 오른쪽 상단의 만들기 ​을 탭하여 모델 만들기 마법사를 표시합니다.

  2. 모델 제목 필드에 ​을 입력하고 만들기 ​를 탭합니다.

    결과 대화 상자에서 열기 ​를 탭하여 새로 만든 모델을 엽니다.

  3. 한 줄 텍스트 요소를 기본 패널로 끌어서 놓습니다. 속성 탭에서 다음 속성을 입력하십시오.

    • 필드 레이블: 제목
    • 속성 이름: title
    • 필수 확인
  4. 데이터 형식 탭을 탭하고 한 줄 텍스트 요소를 드래그하여 기본 패널에 놓습니다. 속성 탭에서 다음 속성을 입력하십시오.

    • 필드 레이블: 짧은 이름
    • 속성 이름: shortName
    • 필수 확인
    • 고유 확인
    • 유효성 검사 유형 > 사용자 지정 선택
    • 사용자 지정 유효성 검사 정규식 > ^[a-z0-9\-_]{5,40}$ 입력 - 5자에서 40자 사이의 소문자 영숫자 값과 대시만 입력할 수 있습니다.

    shortName 속성은 축약된 경로를 기반으로 개별 팀을 쿼리하는 방법을 제공합니다. 고유 설정을 사용하면 이 모델의 콘텐츠 조각별로 값이 항상 고유합니다.

  5. 데이터 형식 탭을 탭하고 짧은 이름 필드 아래에 여러 줄 텍스트 필드를 끌어서 놓습니다. 다음 속성을 입력합니다.

    • 필드 레이블: 설명
    • 속성 이름: description
    • 기본 형식: 서식 있는 텍스트
  6. 데이터 형식 탭을 클릭하고 조각 참조 필드를 끌어서 놓습니다. 다음 속성을 입력합니다.

    • 렌더링 형식: 여러 필드
    • 필드 레이블: 팀원
    • 속성 이름: teamMembers
    • 허용된 콘텐츠 조각 모델: 폴더 아이콘을 사용하여 개인 모델을 선택하십시오.
  7. 최종 모델은 다음과 같아야 합니다.

    최종 팀 모델

  8. 변경 내용을 저장하려면 저장 ​을 클릭하세요.

  9. 이제 다음 두 가지 모델을 사용하여 작업할 수 있습니다.

    모델 두 개

Publish 프로젝트 구성 및 콘텐츠 조각 모델

검토 및 확인 후 Project ConfigurationContent Fragment Model 게시

  1. AEM 시작 화면에서 도구 > 일반 > 구성 브라우저 ​로 이동합니다.

  2. 내 프로젝트 옆의 확인란을 탭하고 Publish ​을 탭합니다.

    Publish 프로젝트 구성

  3. AEM 시작 화면에서 도구 > 일반 > 콘텐츠 조각 모델 ​로 이동합니다.

  4. 내 프로젝트 폴더로 이동합니다.

  5. 사람 모델을 탭하고 Publish ​을 탭하세요.

    Publish 콘텐츠 조각 모델

축하합니다! congratulations

축하합니다. 방금 첫 번째 콘텐츠 조각 모델을 만들었습니다!

다음 단계 next-steps

다음 장 콘텐츠 조각 모델 작성에서는 콘텐츠 조각 모델을 기반으로 새 콘텐츠 조각을 만들고 편집합니다. 콘텐츠 조각의 변형을 만드는 방법도 알아봅니다.

관련 설명서

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4