콘텐츠 모델링

Headless 환경에 대한 구성을 만들려면 도구 > 구성 브라우저(으)로 이동합니다.

제목 및 이름 ​을 제공하고 GraphQL 지속 쿼리 및 콘텐츠 조각 모델 ​을 확인하세요.

도구 > 콘텐츠 조각 모델(으)로 이동하여 1단계에서 만든 구성 이름의 폴더를 선택합니다.

폴더 내에서 만들기 ​를 선택하고 모델 이름을 티저 ​로 지정합니다. 티저 모델에 다음 데이터 형식을 추가하십시오.

폴더 내에서 Offer(이)라는 두 번째 모델을 만듭니다. 만들기 를 클릭하고 모델에 "Offer" 이름을 지정하고 다음 데이터 형식을 추가합니다.

폴더 내에 이미지 목록(이)라는 세 번째 모델을 만듭니다. 만들기 를 클릭하고 모델에 "이미지 목록" 이름을 지정하고 다음 데이터 형식을 추가합니다.

이제 Assets 로 이동하여 새 사이트에 대한 폴더를 만듭니다. 만들기 를 클릭하고 폴더 이름을 지정합니다.

폴더를 만든 후 폴더를 선택하고 속성 ​을 엽니다.

폴더의 클라우드 구성 탭에서 이전에 만든 구성을 선택합니다.

새 폴더를 클릭하고 티저를 만듭니다. 만들기 및 콘텐츠 조각 ​을 클릭하고 티저 모델을 선택합니다. 모델 이름을 Hero ​로 지정하고 만들기 ​를 클릭합니다.

도구 > GraphQL(으)로 이동

만들기 ​를 클릭하고 새 끝점에 이름을 지정한 다음 새로 만든 구성을 선택합니다.

새 엔드포인트를 테스트해 보겠습니다. 도구 > GraphQL 쿼리 편집기(으)로 이동하여 창의 오른쪽 상단에서 드롭다운에 대한 끝점을 선택합니다.

쿼리 편집기에서 몇 가지 다른 쿼리를 만듭니다.

{
    teaserList {
        items {
        title
        }
    }
}

위에서 만든 단일 조각이 포함된 목록을 가져와야 합니다.

이 연습에서는 AEM Headless 앱이 사용하는 전체 쿼리를 만듭니다. 경로별로 단일 티저를 반환하는 쿼리를 만듭니다. 쿼리 편집기에서 다음 쿼리를 입력합니다.

query TeaserByPath($path: String!) {
component: teaserByPath(_path: $path) {
    item {
    __typename
    _path
    _metadata {
        stringMetadata {
        name
        value
        }
    }
    title
    preTitle
    style
    asset {
        ... on MultimediaRef {
        __typename
        _authorUrl
        _publishUrl
        format
        }
        ... on ImageRef {
        __typename
        _authorUrl
        _publishUrl
        mimeType
        width
        height
        }
    }
    description {
        html
        plaintext
    }
    }
}
}

하단의 쿼리 변수 입력에서 다음을 입력합니다.

{
    "path": "/content/dam/pure-headless/hero"
}

쿼리를 실행하여 이전에 만든 콘텐츠 조각의 결과를 수신합니다.

쿼리를 유지(저장)하고 쿼리 이름을 티저 ​하려면 저장 ​을 클릭하세요. 이를 통해 애플리케이션에서 이름별로 쿼리를 참조할 수 있습니다.