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

GitHub에서 tutorial/pages-templates-start 분기 확인

$ 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 컨테이너를 잠급니다.

• 정책을 Page Main(으)로 설정하고 기본 요소 ​이(가) main(으)로 설정되어 있는지 확인하십시오. main 요소는 다음 장에서 CSS로 타깃팅됩니다.

Image 구성 요소를 main 컨테이너에 추가합니다.

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

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

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

이동 경로 구성 요소 아래와 main 컨테이너 내에 Container 구성 요소를 추가하십시오. 이는 템플릿의 콘텐츠 컨테이너 역할을 합니다.

• Content 컨테이너의 잠금을 해제합니다.
• 정책을 페이지 콘텐츠(으)로 설정합니다.

콘텐츠 컨테이너 아래에 다른 컨테이너 구성 요소를 추가합니다. 이는 템플릿의 측면 레일 컨테이너로 작동합니다.

• 측면 레일 컨테이너의 잠금을 해제합니다.
• 이름이 문서 페이지 - 측면 레일 ​인 정책을 만듭니다.
• WKND Sites 프로젝트 - 콘텐츠 ​에서 허용된 구성 요소 ​를 구성하여 다음을 포함합니다. 단추, 다운로드, 이미지, 목록, 구분 기호, 소셜 미디어 공유, 텍스트 및 제목.

페이지 루트 컨테이너의 정책을 업데이트합니다. 템플릿에서 가장 바깥쪽 컨테이너입니다. 정책을 페이지 루트(으)로 설정합니다.

• 컨테이너 설정 ​에서 레이아웃 ​을(를) 응답형 격자(으)로 설정합니다.

콘텐츠 컨테이너 ​에 대한 참여 레이아웃 모드입니다. 핸들을 오른쪽에서 왼쪽으로 드래그하고 컨테이너를 8열 너비로 축소합니다.

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

모바일 에뮬레이터를 열고 모바일 중단점으로 전환합니다. 레이아웃 모드를 다시 시작하고 콘텐츠 컨테이너 및 측면 레일 컨테이너 ​를 페이지의 전체 너비로 만드십시오. 이렇게 하면 모바일 중단점에서 컨테이너가 세로로 스택됩니다.

콘텐츠 컨테이너 ​에서 Text 구성 요소의 정책을 업데이트합니다.

• 정책을 콘텐츠 텍스트(으)로 설정합니다.
• 플러그인 > 단락 스타일 ​에서 단락 스타일 사용 ​을 선택하고 견적 블록 ​이 활성화되어 있는지 확인하십시오.

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

제목 구성 요소를 콘텐츠 컨테이너 ​에 추가합니다. 이 제목은 기사 제목으로 사용됩니다. 비워 두면 현재 페이지의 제목 이 자동으로 표시됩니다.

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

• "작성자별"이라는 텍스트를 사용하여 구성 요소를 구성합니다. 텍스트 자리 표시자입니다.
• 형식을 H4(으)로 설정하십시오.

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

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

• "이 스토리 공유"라는 텍스트를 사용하여 구성 요소를 구성합니다.
• 형식을 H5(으)로 설정하십시오.

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

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

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

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

템플릿에 대한 초기 페이지 속성 ​을(를) 업데이트합니다.

• 소셜 미디어 > 소셜 미디어 공유 ​에서 Facebook 및 Pinterest ​을 확인하세요.

http://localhost:4502/libs/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에서 경험 조각에 사용되는 템플릿인 웹 변형 템플릿을 업데이트합니다.

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

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

조각의 루트 컨테이너 ​를 구성하십시오. 가장 바깥쪽 컨테이너 ​입니다.

• 레이아웃 ​을(를) 응답형 격자(으)로 설정

컨테이너 ​의 맨 위에 WKND 어두운 로고 ​를 이미지로 추가합니다. 이전 단계에서 설치한 패키지에 로고가 포함되었습니다.

• WKND Dark Logo ​의 레이아웃을 두 ​열 너비로 수정하십시오. 오른쪽에서 왼쪽으로 핸들을 드래그합니다.
• "WKND 로고"의 대체 텍스트 ​로 로고를 구성합니다.
• 로고를 홈 페이지의 링크 ​에 구성/content/wknd/us/en합니다.

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

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

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

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

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

조각의 루트 컨테이너 ​를 구성하십시오. 가장 바깥쪽 컨테이너 ​입니다.

• 레이아웃 ​을(를) 응답형 격자(으)로 설정

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

• WKND Light 로고 ​의 레이아웃을 두 ​열 너비로 수정하십시오. 오른쪽에서 왼쪽으로 핸들을 드래그합니다.
• "WKND 로고 라이트"의 대체 텍스트 ​로 로고를 구성합니다.
• 로고를 홈 페이지의 링크 ​에 구성/content/wknd/us/en합니다.

로고 아래에 탐색 구성 요소를 추가합니다. 탐색 구성 요소 구성:

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

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

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

• 문서 페이지 템플릿을 선택하십시오.
• 속성 ​에서 제목 ​을 "Ultimate Guide to LA Skateparks"로 설정합니다.
• Name ​을(를) "가이드-라-스케이트보드장"으로 설정합니다.

작성자별 제목을 "Stacey Roswells별"이라는 텍스트로 바꿉니다.

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

다른 Text 구성 요소를 추가합니다.

• 견적을 포함하려면 구성 요소를 업데이트하십시오. "Los Angeles보다 더 좋은 공유지는 없습니다."
• 전체 화면 모드로 리치 텍스트 편집기를 편집하고 견적 블록 요소를 사용하도록 위의 견적을 수정하십시오.

모형과 일치하도록 문서의 본문을 계속 채웁니다.

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

• 다운로드 > 속성 ​에서 DAM 에셋에서 제목 가져오기 ​에 대한 확인란을 클릭합니다.
• 설명 ​을(를) "전체 스토리 가져오기"로 설정합니다.
• 작업 텍스트 ​을(를) "PDF 다운로드"로 설정합니다.

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

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

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

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

cq:template의 값을 확인합니다. 이 값은 이전에 만든 문서 페이지 템플릿인 /conf/wknd/settings/wcm/templates/article-page을(를) 가리킵니다.

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의 페이지 구성 요소는 핵심 구성 요소 페이지 구성 요소의 기능을 모두 ​상속할 수 있습니다. 이는 프록시 구성 요소 패턴이라는 이름의 첫 번째 예입니다. 자세한 내용은 여기를 참조하세요.

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

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

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

<!--/* /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은(는) 프로젝트를 구현하여 재정의할 명시적 목적으로 만들어집니다.

이 문서🔗을(를) 읽고 Editable Template이 콘텐츠 페이지의 렌더링에 어떤 영향을 미치는지 자세히 알아볼 수 있습니다.

/libs/core/wcm/components/breadcrumb/v2/breadcrumb의 탐색 표시와 같은 다른 핵심 구성 요소를 Inspect에 추가합니다. 이동 경로 구성 요소에 대한 마크업이 최종적으로 생성되는 방법을 이해하려면 breadcrumb.html 스크립트를 봅니다.

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

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

templates 폴더를 마우스 오른쪽 단추로 클릭하고 AEM Server에서 가져오기 ​를 선택합니다.

article-page을(를) 가져와야 하며 page-content, xf-web-variation 템플릿도 업데이트해야 합니다.

콘텐츠를 가져오는 단계를 반복하되 /conf/wknd/settings/wcm/policies에서 정책 폴더를 선택하십시오.

ui.content/src/main/content/META-INF/vault/filter.xml에서 filter.xml 파일을 Inspect합니다.

<!--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을(를) 비교하여 각 모듈에서 관리하는 다른 노드를 이해합니다.