페이지 및 템플릿 pages-and-template

tutorial/pages-templates-startGitHub의 분기를 확인합니다.

$ cd ~/code/aem-guides-wknd
$ git checkout tutorial/pages-templates-start

Maven 기술을 사용하여 로컬 AEM 인스턴스에 코드 베이스를 배포합니다.

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

문서 페이지 ​라는 페이지 템플릿 유형 ​을 사용하여 템플릿을 만듭니다.

구조 모드로 전환합니다.

템플릿 상단에서 머리글 역할을 하는 경험 조각 구성 요소를 추가합니다.

• 구성 요소가 /content/experience-fragments/wknd/us/en/site/header/master를 가리키도록 구성합니다.
• 페이지 머리글 ​에 대한 정책을 설정하고 기본 구성 요소 ​가 header로 설정되도록 합니다. 다음 챕터에서 header 구성 요소는 CSS를 통해 타기팅됩니다.

템플릿 하단에서 바닥글 역할을 하는 경험 조각 구성 요소를 추가합니다.

• 구성 요소가 /content/experience-fragments/wknd/us/en/site/footer/master를 가리키도록 구성합니다.
• 페이지 바닥글 ​에 대한 정책을 설정하고 기본 구성 요소 ​가 footer로 설정되도록 합니다. 다음 챕터에서 footer 구성 요소는 CSS를 통해 타기팅됩니다.

템플릿이 처음 생성될 때 포함된 주 컨테이너를 잠급니다.

• 주 페이지 ​에 대한 정책을 설정하고 기본 구성 요소 ​가 main로 설정되도록 합니다. 다음 챕터에서 main 구성 요소는 CSS를 통해 타기팅됩니다.

이미지 구성 요소를 주 컨테이너에 추가합니다.

• 이미지 구성 요소를 잠금 해제합니다.

주 컨테이너의 이미지 구성 요소 아래에 이동 경로 구성 요소를 추가합니다.

• 문서 페이지 - 이동 경로 ​라는 이동 경로 구성 요소에 대한 정책을 만듭니다. 탐색 시작 수준 ​을 4 ​로 설정합니다.

이동 경로 구성 요소 아래 및 주 컨테이너 내부에 컨테이너 구성 요소를 추가합니다. 이 구성 요소는 템플릿에 대해 콘텐츠 컨테이너 역할을 담당합니다.

• 콘텐츠 컨테이너를 잠금 해제합니다.
• 페이지 콘텐츠 ​에 대한 정책을 설정합니다.

콘텐츠 컨테이너 아래에 또 다른 컨테이너 구성 요소를 추가합니다. 이 구성 요소는 템플릿에 대한 측면 레일 컨테이너 역할을 담당합니다.

• 측면 레일 컨테이너를 잠금 해제합니다.
• 문서 페이지 - 측면 레일 ​이라는 정책을 만듭니다.
• WKND Sites 프로젝트 - 콘텐츠 아래에서 허용된 구성 요소 ​를 구성하여 버튼, 다운로드, 이미지, 목록, 구분자, 소셜 미디어 공유, 텍스트, 제목 ​을 포함하도록 합니다.

페이지 루트 컨테이너의 정책을 업데이트합니다. 이 컨테이너는 템플릿의 가장 바깥쪽 컨테이너입니다. 페이지 루트 ​에 대한 정책을 설정합니다.

• 컨테이너 설정 ​에서 레이아웃 ​을 반응형 그리드 ​로 설정합니다.

콘텐츠 컨테이너 ​에 대한 레이아웃 모드를 활성화합니다. 핸들을 오른쪽에서 왼쪽으로 끌어서 컨테이너를 8열 너비로 줄입니다.

측면 레일 컨테이너 ​에 대한 레이아웃 모드를 활성화합니다. 핸들을 오른쪽에서 왼쪽으로 끌어서 컨테이너를 4열 너비로 줄입니다. 그런 다음 왼쪽 핸들을 왼쪽에서 오른쪽으로 한 열 끌어서 컨테이너 너비를 3열로 만들고 콘텐츠 컨테이너 사이에 1열 간격을 둡니다.

모바일 에뮬레이터를 열고 모바일 중단점으로 전환합니다. 레이아웃 모드를 다시 실행하고 콘텐츠 컨테이너 ​와 측면 레일 컨테이너 ​를 페이지의 전체 너비로 설정합니다. 이렇게 하면 모바일 중단점에서 컨테이너가 수직으로 쌓입니다.

콘텐츠 컨테이너 ​에 위치한 텍스트 구성 요소의 정책을 업데이트합니다.

• 콘텐츠 텍스트 ​에 대한 정책을 설정합니다.
• 플러그인 > 단락 스타일 ​에서 단락 스타일 활성화 ​를 선택하고 인용 블록 ​이 활성화되어 있는지 확인합니다.

초기 콘텐츠 모드로 전환합니다.

제목 구성 요소를 콘텐츠 컨테이너 ​에 추가합니다. 이 구성 요소는 문서 제목으로 사용됩니다. 비어 있는 경우 현재 페이지의 제목이 자동으로 표시됩니다.

첫 번째 제목 구성 요소 아래에 두 번째 제목 구성 요소를 추가합니다.

• '작성자별'이라는 텍스트로 구성 요소를 구성합니다. 이는 텍스트 플레이스홀더입니다.
• 유형을 H4로 설정합니다.

작성자별 제목 구성 요소 아래에 텍스트 구성 요소를 추가합니다.

제목 구성 요소를 측면 레일 컨테이너 ​에 추가합니다.

• '이 스토리 공유'라는 텍스트로 구성 요소를 구성합니다.
• 유형을 H5로 설정합니다.

이 스토리 공유 제목 구성 요소 아래에 소셜 미디어 공유 구성 요소를 추가합니다.

소셜 미디어 공유 구성 요소 아래에 구분자 구성 요소를 추가합니다.

구분자 구성 요소 아래에 다운로드 구성 요소를 추가합니다.

다운로드 구성 요소 아래에 목록 구성 요소를 추가합니다.

템플릿의 초기 페이지 속성 ​을 업데이트합니다.

• 소셜 미디어 > 소셜 미디어 공유 ​에서 Facebook 및 Pinterest ​를 선택합니다.

http://localhost:4502libs/wcm/core/content/sites/templates.html/conf/wknd로 이동하여 템플릿 콘솔에서 템플릿을 확인합니다.

문서 페이지 템플릿을 활성화 ​합니다.

문서 페이지 템플릿의 속성을 편집하고 다음 썸네일을 업로드하면 문서 페이지 템플릿을 사용하여 만든 페이지를 빠르게 식별할 수 있습니다.

샘플 콘텐츠 패키지인 WKND-PagesTemplates-Content-Assets.zip ​을 다운로드합니다.

http://localhost:4502/crx/packmgr/index.jsp에서 패키지 관리자를 사용하여 콘텐츠 패키지를 업로드하고 설치합니다.

http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html에서 경험 조각에 사용되는 템플릿인 웹 베리에이션 템플릿을 업데이트합니다.

• 템플릿에서 컨테이너 구성 요소 정책을 업데이트합니다.
• XF 루트 ​에 대한 정책을 설정합니다.
• 허용된 구성 요소 ​에서 구성 요소 그룹 WKND Sites 프로젝트 - 구조 ​를 선택하여 언어 탐색, 탐색, 빠른 검색 구성 요소를 포함합니다.

http://localhost:4502editor.html/content/experience-fragments/wknd/us/en/site/header/master.html에서 머리글을 렌더링하는 경험 조각을 엽니다.

조각의 루트 컨테이너 ​를 구성합니다. 이 컨테이너는 가장 바깥쪽 컨테이너 ​입니다.

• 레이아웃 ​을 반응형 그리드 ​로 설정합니다.

컨테이너 ​의 상단에 WKND 다크 로고 ​를 이미지로 추가합니다. 로고는 이전 단계에서 설치된 패키지에 포함되었습니다.

• WKND 다크 로고 ​의 레이아웃을 2 ​열 너비로 수정합니다. 핸들을 오른쪽에서 왼쪽으로 드래그합니다.
• 로고를 'WKND 로고'라는 대체 텍스트 ​로 로고를 구성합니다.
• /content/wknd/us/en 홈 페이지로 연결 ​되도록 로고를 구성합니다.

이미 페이지에 배치된 탐색 구성 요소를 구성합니다.

• 루트 수준 제외 ​를 1 ​로 설정합니다.
• 탐색 구조 깊이 ​를 1 ​로 설정합니다.
• 탐색 구성 요소의 레이아웃을 8 ​열 너비로 수정합니다. 핸들을 오른쪽에서 왼쪽으로 드래그합니다.

언어 탐색 구성 요소를 제거합니다.

검색 구성 요소의 레이아웃을 2 ​열 너비로 수정합니다. 핸들을 오른쪽에서 왼쪽으로 드래그합니다. 이제 모든 구성 요소를 한 행에 수평으로 정렬해야 합니다.

http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html에서 바닥글을 렌더링하는 경험 조각을 엽니다.

조각의 루트 컨테이너 ​를 구성합니다. 이 컨테이너는 가장 바깥쪽 컨테이너 ​입니다.

• 레이아웃 ​을 반응형 그리드 ​로 설정합니다.

컨테이너 ​의 상단에 WKND 라이트 로고 ​를 이미지로 추가합니다. 로고는 이전 단계에서 설치된 패키지에 포함되었습니다.

• WKND 라이트 로고 ​의 레이아웃을 2 ​열 너비로 수정합니다. 핸들을 오른쪽에서 왼쪽으로 드래그합니다.
• 로고를 'WKND 로고 라이트'라는 대체 텍스트 ​로 로고를 구성합니다.
• /content/wknd/us/en 홈 페이지로 연결 ​되도록 로고를 구성합니다.

로고 아래에 탐색 구성 요소를 추가합니다. 탐색 구성 요소를 다음과 같이 구성합니다.

• 루트 수준 제외 ​를 1 ​로 설정합니다.
• 모든 하위 페이지 수집 ​을 선택 해제합니다.
• 탐색 구조 깊이 ​를 1 ​로 설정합니다.
• 탐색 구성 요소의 레이아웃을 8 ​열 너비로 수정합니다. 핸들을 오른쪽에서 왼쪽으로 드래그합니다.

http://localhost:4502/sites.html/content/wknd/us/en/magazine에서 사이트 콘솔로 이동합니다.

WKND > US > EN > 매거진 아래에서 페이지를 만듭니다.

• 문서 페이지 템플릿을 선택합니다.
• 속성 ​에서 제목 ​을 'LA 스케이트보드장 완벽 가이드'로 설정합니다.
• 이름 ​을 'guide-la-skateparks'로 설정합니다.

작성자별 제목을 'Stacey Roswells 작성'으로 바꿉니다.

문서를 채울 문단을 포함하도록 텍스트 구성 요소를 업데이트합니다. la-skate-parks-copy.txt 텍스트 파일을 복사본으로 사용할 수 있습니다.

또 다른 텍스트 구성 요소를 추가합니다.

• 구성 요소를 업데이트하여 '로스앤젤레스보다 기술을 선보이기에 더 좋은 곳은 없습니다.'라는 인용문을 포함합니다.
• 전체 화면 모드에서 리치 텍스트 편집기를 편집하고 위의 인용문을 수정하여 인용 블록 요소를 사용합니다.

목업에 맞게 문서 본문을 계속 채웁니다.

PDF 버전의 문서를 사용하려면 다운로드 구성 요소를 구성합니다.

• 다운로드 > 속성 ​에서 확인란을 클릭하여 DAM 자산에서 제목을 가져옵니다.
• 설명 ​을 '전체 스토리 보기'로 설정합니다.
• 작업 텍스트 ​를 'PDF 다운로드'로 설정합니다.

목록 구성 요소를 구성합니다.

• 목록 설정 > 목록 작성 도구 ​에서 하위 페이지 ​를 선택합니다.
• 상위 페이지 ​를 /content/wknd/us/en/magazine으로 설정합니다.
• 항목 설정 ​에서 항목 연결 ​을 선택하고 날짜 표시 ​를 선택합니다.

CRXDE-Lite를 열고 트리 탐색을 사용하여 /content/wknd/us/en/magazine/guide-la-skateparks로 이동합니다.

la-skateparks 페이지 아래에서 jcr:content 노드를 클릭하고 속성을 확인합니다.

앞서 만든 문서 페이지 템플릿인 /conf/wknd/settings/wcm/templates/article-page를 가리키는 cq:template의 값을 확인합니다.

또한 wknd/components/page를 가리키는 sling:resourceType의 값도 확인합니다. AEM Project Archetype에 의해 생성된 페이지 구성 요소로, 템플릿을 기반으로 페이지를 렌더링하는 역할을 합니다.

/content/wknd/us/en/magazine/guide-la-skateparks/jcr:content 아래에서 jcr:content를 확장하고 노드 계층을 확인합니다.

각 노드는 작성된 구성 요소에 느슨하게 매핑할 수 있습니다. container 접두사가 붙은 노드를 검사하여 다양한 레이아웃 컨테이너가 사용되는지 확인합니다.

다음으로 /apps/wknd/components/page에서 페이지 구성 요소를 검사합니다. CRXDE Lite에서 구성 요소 속성을 확인합니다.

HTL 스크립트는 페이지 구성 요소 아래에 customfooterlibs.html 및 customheaderlibs.html 두 개만 있습니다. 그렇다면 이 구성 요소는 페이지를 어떻게 렌더링할까요?

sling:resourceSuperType 속성은 core/wcm/components/page/v2/page를 가리킵니다. 이 속성을 사용하면 WKND의 페이지 구성 요소가 핵심 구성 요소 페이지 구성 요소의 모든 기능을 상속할 수 있습니다. 이는 프록시 구성 요소 패턴이라 불리는 경우의 첫 번째 예시입니다. 자세한 내용은 여기에서 확인할 수 있습니다.

/apps/wknd/components/breadcrumb에서 WKND 구성 요소인 Breadcrumb 구성 요소 내 또 다른 구성 요소를 검사합니다. 동일한 sling:resourceSuperType 속성을 찾을 수 있지만 이번에는 이 속성이 core/wcm/components/breadcrumb/v2/breadcrumb를 가리킵니다. 이는 핵심 구성 요소를 포함하기 위해 프록시 구성 요소 패턴을 사용하는 또 다른 예시입니다. 실제로 WKND 코드 베이스의 모든 구성 요소는 AEM 핵심 구성 요소의 프록시입니다(사용자 정의 데모 HelloWorld 구성 요소 제외). 사용자 정의 코드를 작성하기 전 ​에 가능한 한 핵심 구성 요소의 기능을 재사용하는 것이 가장 좋습니다.

다음으로 /libs/core/wcm/components/page/v2/page에서 CRXDE Lite를 사용하여 핵심 구성 요소를 검사합니다.

이 페이지 아래에는 많은 스크립트 파일이 포함되어 있습니다. 핵심 구성 요소 페이지에는 다양한 기능이 포함되어 있습니다. 이 기능은 유지 관리와 가독성을 높이기 위해 여러 스크립트로 나뉩니다. HTL 스크립트가 포함되었는지 추적하려면 page.html을 열고 data-sly-include를 찾습니다.

<!--/* /libs/core/wcm/components/page/v2/page/page.html */-->
<!DOCTYPE HTML>
<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
    data-sly-use.head="head.html"
    data-sly-use.footer="footer.html"
    data-sly-use.redirect="redirect.html">
    <head data-sly-call="${head.head @ page = page}"></head>
    <body class="${page.cssClassNames}"
        id="${page.id}"
        data-cmp-data-layer-enabled="${page.data ? true : false}">
        <script data-sly-test.dataLayerEnabled="${page.data}">
        window.adobeDataLayer = window.adobeDataLayer || [];
        adobeDataLayer.push({
            page: JSON.parse("${page.data.json @ context='scriptString'}"),
            event:'cmp:show',
            eventInfo: {
                path: 'page.${page.id @ context="scriptString"}'
            }
        });
        </script>
        <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
            data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
        <sly data-sly-test="${!isRedirectPage}">
            <sly data-sly-include="body.skiptomaincontent.html"></sly>
            <sly data-sly-include="body.socialmedia_begin.html"></sly>
            <sly data-sly-include="body.html"></sly>
            <sly data-sly-call="${footer.footer @ page = page}"></sly>
            <sly data-sly-include="body.socialmedia_end.html"></sly>
        </sly>
    </body>
</html>

HTL을 여러 스크립트로 나누는 또 다른 이유는 프록시 구성 요소가 개별 스크립트를 재정의하여 사용자 정의 비즈니스 로직을 구현할 수 있도록 하기 위함입니다. HTL 스크립트 customfooterlibs.html 및 customheaderlibs.html은 구현 프로젝트에서 재정의하기 위함이라는 명시적인 목적에 따라 만들어졌습니다.

이 문서를 읽으면 콘텐츠 페이지의 렌더링에 편집 가능한 템플릿 요소가 어떻게 적용되는지 자세히 알아볼 수 있습니다.

/libs/core/wcm/components/breadcrumb/v2/breadcrumb에서 이동 경로와 같은 다른 핵심 구성 요소를 검사합니다. breadcrumb.html 스크립트를 확인하여 이동 경로 구성 요소에 대한 마크업이 최종적으로 어떻게 생성되는지 이해합니다.

VSCode에서 aem-guides-wknd 프로젝트를 엽니다.

프로젝트 탐색기에서 ui.content 모듈을 확장합니다. src 폴더를 확장하여 /conf/wknd/settings/wcm/templates로 이동합니다.

templates 폴더를 마우스 오른쪽 버튼으로 클릭라고 AEM 서버에서 가져오기 ​를 선택합니다.

article-page 가져오기가 완료되며 page-content, xf-web-variation 템플릿 또한 업데이트됩니다.

콘텐츠를 가져오는 단계를 반복하되 이번에는 /conf/wknd/settings/wcm/policies의 정책 폴더를 선택합니다.

ui.content/src/main/content/META-INF/vault/filter.xml의 filter.xml 파일을 검사합니다.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/conf/wknd" mode="merge"/>
    <filter root="/content/wknd" mode="merge"/>
    <filter root="/content/dam/wknd" mode="merge"/>
    <filter root="/content/experience-fragments/wknd" mode="merge"/>
</workspaceFilter>

filter.xml 파일은 패키지와 함께 설치된 노드의 경로를 식별하는 역할을 합니다. 각 필터에서 기존 콘텐츠는 수정되지 않고 새로운 콘텐츠만 추가되었음을 의미하는 mode="merge"를 확인합니다. 콘텐츠 작성자가 이러한 경로를 업데이트할 수 있으므로 코드 배포 시 콘텐츠를 덮어쓰지 않는 것이 중요합니다. 필터 요소를 사용하는 작업에 대한 자세한 내용은 FileVault 문서에서 확인할 수 있습니다.

ui.content/src/main/content/META-INF/vault/filter.xml 및 ui.apps/src/main/content/META-INF/vault/filter.xml을 비교하여 각 모듈에서 관리하는 다양한 노드를 이해합니다.