경험 조각 사용

마지막 업데이트: 2023-05-20
  • 작성 대상:
  • Intermediate
    Admin
    Developer

이 페이지에서는 다음 주제를 다룹니다.

  • 개요
  • AEM Screens에서 경험 조각 사용
  • 페이지에 변경 사항 전파

개요

An 경험 조각 는 페이지 내에서 참조할 수 있는 컨텐츠 및 레이아웃을 포함한 하나 이상의 구성 요소 그룹입니다. 경험 조각에는 전체 경험에 참조되거나 세 번째 끝점에서 요청할 수 있는 단락 시스템 내의 모든 요소를 포함할 수 있는 하나 또는 여러 구성 요소와 같은 구성 요소가 포함될 수 있습니다.

AEM Screens에서 경험 조각 사용

노트

다음 예제에서는 를 사용합니다 We.Retail 경험 조각이 활용되는 데모 프로젝트 사이트 페이지를 AEM Screens 프로젝트에 복사합니다.

예를 들어 다음 워크플로우는 Sites에서 We.Retail의 경험 조각을 사용하는 방법을 보여 줍니다. 웹 페이지를 선택하고 프로젝트 중 하나에서 AEM Screens 채널의 해당 콘텐츠를 활용할 수 있습니다.

전제 조건

채널을 사용하여 데모 프로젝트 만들기

프로젝트 만들기

  1. 클릭 스크린 프로젝트 만들기 새 프로젝트를 만듭니다.
  2. 제목 입력 DemoProject.
  3. 저장​을 클릭합니다.

A DemoProject 가 AEM Screens에 추가됩니다.

채널 만들기

  1. 다음 위치로 이동 DemoProject 을(를) 만들고 선택한 채널 폴더를 삭제합니다.

  2. 클릭 만들기 을 클릭하여 마법사를 엽니다.

  3. 다음을 선택합니다. 시퀀스 채널 마법사에서 템플릿을 클릭하고 다음.

  4. 다음을 입력합니다. 제목 다음으로: 테스트 채널 및 클릭 만들기.

A 테스트 채널 이(가) 다음에 추가됩니다. DemoProject.
screen_shot_2019-07-29at105101am

경험 조각 생성

콘텐츠를 활용하려면 아래 단계를 따르십시오. We.Retail (으)로 테스트 채널 위치: DemoProject.

  1. We.Retail에서 사이트 페이지로 이동

    1. 사이트로 이동하여 We.Retail -> 미국 -> 영어 -> 장비 Screens 채널의 경험 조각으로 사용하려면 이 페이지를 선택하십시오.

    2. 클릭 편집 작업 표시줄에서 Screens 채널에 대한 경험 조각으로 사용할 페이지를 엽니다.

  2. 콘텐츠 재사용

    1. 채널에 포함할 조각을 선택합니다.
    2. 오른쪽에서 마지막 아이콘을 클릭하여 경험 조각으로 변환 대화 상자.

    screen_shot_2019-07-29at105314am

  3. 경험 조각 만들기

    1. 다음을 선택합니다. 작업 다음으로: 새 경험 조각 만들기.

    2. 다음 항목 선택 상위 경로.

    3. 다음 항목 선택 템플릿. 다음을 선택합니다. 경험 조각 - 화면 변형 여기에 템플릿(필드의 값) /libs/settings/screens/experience-fragments/templates/experience-fragment-template-screens).

    4. 다음을 입력합니다. 조각 제목 다음으로: ScreensFragment.

    5. 확인 표시를 클릭하여 새 경험 조각 만들기를 완료합니다.

    screen_shot_2019-07-29at105918am

    참고: 더 쉬운 옵션을 선택하려면 필드 오른쪽의 확인 표시를 클릭하여 선택 대화 상자를 엽니다.

  4. 경험 조각의 라이브 카피 만들기

    1. AEM 홈 페이지로 이동합니다.
    2. 선택 경험 조각 및 강조 표시 ScreensFragment 및 클릭 변형을 Live Copy로​아래 그림과 같이

    screen_shot_2019-07-29at110443am

    c. ScreensFragment 출처: Live Copy 만들기 마법사 및 클릭 다음.

    d. 다음을 입력합니다. 제목이름 다음으로: 스크린.

    e. 클릭 만들기 라이브 카피를 만들 수 있습니다.

    f. 클릭 완료 로 돌아가기 ScreensFragment 페이지를 가리키도록 업데이트하는 중입니다.

    screen_shot_2019-07-29at110616am

    노트

    Screens 조각을 만들면 조각의 속성을 편집할 수 있습니다. 조각을 선택하고 속성 작업 표시줄에서

    화면 조각의 속성 편집

    1. 다음 위치로 이동 ScreensFragment (이전 단계에서 생성한 항목) 을 클릭하고 속성 작업 표시줄에서

    2. 다음 항목 선택 오프라인 구성 아래 그림과 같이 탭으로 이동합니다.

    다음을 추가할 수 있습니다. 클라이언트 측 라이브러리 (java 및 css) 및 정적 파일 경험 조각에 매핑됩니다.

    다음 예는 경험 조각에 정적 파일의 일부로서 클라이언트측 라이브러리와 글꼴을 추가하는 방법을 보여줍니다. 조각

  5. 화면 채널에서 경험 조각을 구성 요소로 사용

    1. 를 사용할 Screens 채널로 이동합니다. 스크린 조각.

    2. 다음 항목 선택 테스트 채널 및 클릭 편집 작업 표시줄에서

    3. 측면 탭에서 구성 요소 아이콘을 클릭합니다.

    4. 을(를) 끌어다 놓습니다. 경험 조각 을(를) 내 채널로 보냅니다.

    screen_shot_2019-07-29at123115pm

    e. 다음을 선택합니다 경험 조각 구성 요소를 클릭하고 왼쪽 상단(렌치) 아이콘을 선택하여 경험 조각 대화 상자.

    f. 다음을 선택합니다. 스크린 만든 조각의 라이브 카피 3단계 위치: 경로.

    screen_shot_2019-07-26at82650pm

    f. 다음을 선택합니다. 스크린 만든 조각의 라이브 카피 3단계 다음에서 경험 조각.

    screen_shot_2019-07-26at82509pm

    h. 밀리초를 입력합니다. 기간.

    i. 선택 오프라인 구성 다음에서 경험 조각 클라이언트측 라이브러리 및 정적 파일을 정의하는 대화 상자

    노트

    단계 (4)에서 구성한 것 외에 클라이언트측 라이브러리 또는 정적 파일을 추가하려면 오프라인 구성 의 탭 경험 조각 대화 상자.

    screen_shot_2019-07-26at82844pm

    j. 확인 표시를 클릭하여 프로세스를 완료합니다.

결과 확인

이전 단계를 완료하고에서 경험 조각의 유효성을 검사할 수 있습니다. ChannelOne 수행한 사람:

  1. 다음으로 이동 테스트 채널.
  2. 선택 미리 보기 작업 표시줄에서

다음에서 콘텐츠를 봅니다. 사이트 아래 그림과 같이 채널에서 페이지(경험 조각의 라이브 카피)를 확인할 수 있습니다.
screen_shot_2018-06-08at120739pm

페이지에 변경 사항 전파

Live Copy 은 롤아웃 구성에서 정의한 동기화 작업에 의해 관리되는 (소스의) 사본을 나타냅니다.

경험 조각 이후 에서는 라이브 카피가 생성됩니다. 사이트 따라서 마스터 페이지에서 특정 조각을 변경하면 경험 조각을 사용한 채널 또는 대상의 변경 사항이 표시됩니다.

노트

라이브 카피에 대한 자세한 내용은 콘텐츠 재사용: 다중 사이트 관리자 및 라이브 카피 를 참조하십시오.

마스터 채널의 변경 사항을 대상 채널에 전파하려면 아래 단계를 따르십시오.

  1. 에서 경험 조각 선택 사이트 (마스터) 페이지를 열고 연필 아이콘을 클릭하여 경험 조각의 항목을 편집합니다.

    screen_shot_2018-06-08at122655pm

  2. 경험 조각 을 선택하고 렌치 아이콘 을 클릭하여 이미지를 편집할 수 있는 대화 상자를 엽니다.

    screen_shot_2018-06-08at25031pm

  3. 다음 제품 격자 대화 상자가 열립니다.

    screen_shot_2018-06-08at25306pm

  4. 모든 이미지를 편집할 수 있습니다. 예를 들어 여기에서 첫 번째 이미지는 이 조각에서 대체됩니다.

    screen_shot_2018-06-08at25608pm

  5. 경험 조각을 선택하고 롤아웃 아이콘을 클릭하여 채널에서 사용되는 조각에 변경 사항을 전파합니다.

    screen_shot_2018-06-08at31352pm

  6. 롤아웃 을 클릭하여 변경 내용을 확인합니다.

    변경 사항이 롤아웃됩니다.

    screen_shot_2018-06-08at32148pm

변경 사항 확인

채널의 변경 사항을 확인하려면 아래 단계를 따르십시오.

  1. 다음 위치로 이동 스크린 -> 채널 -> 테스트 채널.

  2. 클릭 미리 보기 작업 표시줄에서 을 클릭하여 변경 내용을 확인합니다.

다음 이미지는 의 변경 사항을 보여 줍니다 테스트 채널:
screen_shot_2018-06-08at33351pm

이 페이지에서는