페이지 템플릿 - 정적 page-templates-static

CAUTION
AEM 6.4가 확장 지원이 종료되었으며 이 설명서는 더 이상 업데이트되지 않습니다. 자세한 내용은 기술 지원 기간. 지원되는 버전 찾기 여기.

템플릿은 페이지를 만드는 데 사용되며 선택한 범위 내에서 사용할 수 있는 구성 요소를 정의합니다. 템플릿은 만들 페이지와 구조가 동일하지만 실제 컨텐츠는 없는 노드 계층 구조입니다.

각 템플릿에는 사용할 수 있는 구성 요소 선택 사항이 표시됩니다.

  • 템플릿은 구성 요소;
  • 구성 요소는 컨텐츠를 렌더링하는 데 사용, 액세스 허용 및 위젯을 사용합니다.
NOTE
편집 가능한 템플릿 또한 대부분의 유연성과 최신 기능을 위해 권장되는 템플릿 유형이기도 합니다.

템플릿의 속성 및 하위 노드 properties-and-child-nodes-of-a-template

템플릿은 cq:Template 유형의 노드이며 다음 속성 및 하위 노드를 포함합니다.

이름
유형
설명
.
cq:Template
현재 템플릿입니다. 템플릿은 cq:Template 노드 유형입니다.
allowedChildren
문자열[]
이 템플릿의 하위로 허용되는 템플릿의 경로입니다.
allowedParent
문자열[]
이 템플릿의 상위 항목이 될 수 있는 템플릿의 경로입니다.
allowedPaths
문자열[]
이 템플릿을 기반으로 할 수 있는 페이지의 경로입니다.
jcr:created
날짜
템플릿 생성 날짜입니다.
jcr:description
문자열
템플릿에 대한 설명입니다.
jcr:title
문자열
템플릿의 제목입니다.
등급
템플릿의 등급입니다. 사용자 인터페이스에 템플릿을 표시하는 데 사용됩니다.
jcr:content
cq:PageContent
템플릿의 컨텐츠가 들어 있는 노드입니다.
thumbnail.png
nt:file
템플릿의 축소판입니다.
icon.png
nt:file
템플릿의 아이콘입니다.

템플릿은 페이지의 기반이 됩니다.

페이지를 만들려면 템플릿을 복사해야 합니다(노드 트리) /apps/<myapp>/template/<mytemplate>)를 클릭하여 사이트 트리에서 해당 위치를 지정합니다. 페이지가 웹 사이트 탭.

또한 이 복사 작업은 페이지의 초기 컨텐츠(일반적으로 최상위 컨텐츠만 해당)와 페이지를 렌더링하는 데 사용되는 페이지 구성 요소의 경로(하위 노드 jcr:content의 모든 항목)인 sling:resourceType 속성을 제공합니다.

템플릿 구성 방법 how-templates-are-structured

고려해야 할 두 가지 측면이 있습니다.

  • 템플릿 자체의 구조
  • 템플릿을 사용할 때 생성되는 컨텐츠의 구조

템플릿의 구조 the-structure-of-a-template

템플릿은 유형의 노드 아래에 만들어집니다 cq:템플릿.

screen_shot_2012-02-13at63646pm

특히 다음과 같은 다양한 속성을 설정할 수 있습니다.

  • jcr:title - 템플릿의 제목 페이지를 만들 때 대화 상자에 표시됩니다.
  • jcr:description - 템플릿 설명 페이지를 만들 때 대화 상자에 표시됩니다.

이 노드에는 결과 페이지의 컨텐츠 노드의 기반으로 사용되는 jcr:content(cq:PageContent) 노드가 포함되어 있습니다. 새 페이지의 실제 컨텐츠를 렌더링하는 데 사용할 구성 요소인 sling:resourceType을 사용하여 를 참조합니다.

screen_shot_2012-02-13at64010pm

이 구성 요소는 새 페이지를 만들 때 컨텐츠의 구조와 디자인을 정의하는 데 사용됩니다.

screen_shot_2012-02-13at64137pm

템플릿에서 만든 컨텐츠 the-content-produced-by-a-template

템플릿은 유형의 페이지를 만드는 데 사용됩니다 cq:Page 앞에서 언급했듯이 페이지는 특별한 유형의 구성 요소입니다. 각 AEM 페이지에는 구조화된 노드가 있습니다 jcr:content. 이를 통해 다음이 가능합니다.

  • 유형 cq:PageContent
  • 정의된 컨텐츠 정의를 포함하는 구조화된 노드 유형입니다
  • 에는 속성이 있습니다 sling:resourceType 컨텐츠 렌더링에 사용되는 sling 스크립트를 포함하는 구성 요소를 참조하려면

기본 템플릿 default-templates

AEM에는 즉시 사용 가능한 많은 기본 템플릿이 포함되어 있습니다. 경우에 따라 템플릿을 그대로 사용할 수 있습니다. 이 경우 웹 사이트에서 템플릿을 사용할 수 있는지 확인해야 합니다.

예를 들어, AEM에는 컨텐트 페이지 및 홈 페이지를 포함한 여러 템플릿이 포함되어 있습니다.

제목
구성 요소
위치
용도
홈 페이지
홈 페이지
geometrixx
Geometrixx 홈 페이지 템플릿입니다.
콘텐츠 페이지
contentpage
geometrixx
Geometrixx 컨텐츠 페이지 템플릿.

기본 템플릿 표시 displaying-default-templates

저장소의 모든 템플릿 목록을 보려면 다음과 같이 진행하십시오.

  1. CRXDE Lite에서 도구 메뉴를 클릭하고 쿼리.

  2. 쿼리 탭에서

  3. 로서의 유형, 선택 XPath.

  4. 쿼리 입력 필드에 다음 문자열을 입력합니다.

    //element(*, cq:Template)

  5. 클릭 실행. 결과 상자에 목록이 표시됩니다.

대부분의 경우 기존 템플릿을 가져와 직접 사용할 새 템플릿을 개발할 수 있습니다. 자세한 내용은 페이지 템플릿 개발 추가 정보.

웹 사이트에 대한 기존 템플릿을 사용 가능하도록 하여 페이지 만들기 바로 아래에 페이지를 만들 때의 대화 상자 웹 사이트 에서 웹 사이트 콘솔에서 템플릿 노드의 allowedPaths 속성을 다음으로 설정합니다. /content(/)*)?

템플릿 디자인이 적용되는 방식 how-template-designs-are-applied

UI에서 디자인 모드로 지정하는 경우, 디자인은 스타일이 정의되는 컨텐츠 노드의 정확한 경로에 유지됩니다.

CAUTION
Adobe은 디자인 모드.
예를 들어, CRX DE에서 디자인을 수정하는 것은 좋지 않으며, 그러한 디자인의 애플리케이션은 예상 동작과 다를 수 있습니다.

디자인이 디자인 모드를 사용해서만 적용되는 경우 다음 섹션에서 디자인 경로 해상도, 의사 결정 트리, 및 해당 사항 없습니다.

NOTE
이 섹션에서는 AEM 6.4.2.0의 디자인 경로 해상도 동작에 대해 설명합니다.

디자인 경로 해상도 design-path-resolution

정적 템플릿을 기반으로 컨텐츠를 렌더링할 때 AEM은 컨텐츠 계층 구조의 순번에 따라 콘텐츠에 가장 관련성이 높은 디자인 및 스타일을 적용하려고 합니다.

AEM은 컨텐츠 노드에 대해 다음 순서로 가장 관련성이 높은 스타일을 결정합니다.

  • 디자인 모드에서 디자인이 정의된 경우처럼 컨텐츠 노드의 전체 및 정확한 경로에 대한 디자인이 있는 경우 해당 디자인을 사용합니다.
  • 상위의 컨텐츠 노드에 대한 디자인이 있으면 해당 디자인을 사용합니다.
  • 컨텐츠 노드의 경로에 있는 모든 노드에 대한 디자인이 있는 경우 해당 디자인을 사용합니다.

마지막 두 가지 경우 적용 가능한 디자인이 두 개 이상 있는 경우 컨텐츠 노드에 가장 가까운 디자인을 사용합니다.

의사 결정 트리 decision-tree

이 그래픽은 디자인 경로 해상도 논리를 사용합니다.

design_path_resolution

example

디자인을 노드에 적용할 수 있는 간단한 컨텐츠 구조를 다음과 같이 생각해 보십시오.

/root/branch/leaf

다음 표에서는 AEM에서 디자인을 선택하는 방법을 설명합니다.

디자인 찾기
디자인이
선택한 디자인
설명
leaf

root

branch

leaf

leaf
가장 정확한 매치가 항상 수행됩니다.
leaf

root

branch

branch
나무에서 가장 가까운 매치 아래로 내려가세요.
leaf
root
root
다른 모든 것이 실패하면 남은 것을 가져가세요.
branch
branch
branch
branch

branch

leaf

branch
branch

root

branch

branch
branch

root

leaf

root

정확히 일치하는 항목이 없으면 트리의 맨 아래 항목을 선택하십시오.

이는 항상 적용할 수 있지만 트리 위쪽에서는 너무 구체적일 수 있습니다.

페이지 템플릿 개발 developing-page-templates

AEM 페이지 템플릿은 새 페이지를 만드는 데 사용되는 간단한 모델입니다. 초기 컨텐츠를 필요한 만큼 거의 포함할 수 있으며 초기 컨텐츠 역할은 필요한 속성(주로 sling:resourceType)을 설정하여 편집하고 렌더링할 수 있는 올바른 초기 노드 구조를 만드는 것입니다.

기존 템플릿을 기반으로 새 템플릿 만들기 creating-a-new-template-based-on-an-existing-template

새 템플릿을 처음부터 완전히 만들 수는 있지만, 기존 템플릿을 복사하고 업데이트하여 시간과 노력을 절약할 수 있습니다. 예를 들어 Geometrixx 내의 템플릿을 사용하여 시작할 수 있습니다.

기존 템플릿을 기반으로 새 템플릿을 만들려면 다음을 수행하십시오.

  1. 기존 템플릿(가급적 원하는 내용에 가까운 정의가 있는 경우)을 새 노드에 복사합니다.

    템플릿은 일반적으로 /apps/<website-name>/templates/<template-name>.

    note note
    NOTE
    사용 가능한 템플릿 목록은 새 페이지의 위치와 각 템플릿에 지정된 배치 제한에 따라 다릅니다. 자세한 내용은 템플릿 가용성.
  2. 변경 jcr:title 새 역할을 반영하도록 새 템플릿 노드 또한 jcr:description 해당되는 경우 페이지의 템플릿 가용성을 적절하게 변경해야 합니다.

    note note
    NOTE
    템플릿을 페이지 만들기 바로 아래에 페이지를 만들 때의 대화 상자 웹 사이트 에서 웹 사이트 콘솔에서 설정 allowedPaths 템플릿 노드의 등록 정보: /content(/.*)?

    chlimage_1-251

  3. 템플릿의 기반이 되는 구성 요소를 복사합니다. 이 구성 요소는 sling:resourceType 속성 jcr:content 노드 내에 있는 노드)를 사용하여 새 인스턴스를 만듭니다.

    구성 요소는 일반적으로 /apps/<website-name>/components/<component-name>.

  4. 업데이트 jcr:titlejcr:description 새 구성 요소의 일부입니다.

  5. 템플릿 선택 목록(크기 128 x 98px)에 새 축소판 그림을 표시하려면 thumbnail.png를 바꿉니다.

  6. 업데이트 sling:resourceType 템플릿의 jcr:content 새 구성 요소를 참조할 노드입니다.

  7. 템플릿 및/또는 기본 구성 요소의 기능이나 디자인을 추가로 변경합니다.

    note note
    NOTE
    에 대한 변경 사항 /apps/<website>/templates/<template-name> 노드는 선택 목록에서와 같이 템플릿 인스턴스에 영향을 줍니다.
    에 대한 변경 사항 /apps/<website>/components/<component-name> 노드는 템플릿 사용 시 생성된 컨텐츠 페이지에 영향을 줍니다.

    이제 새 템플릿을 사용하여 웹 사이트 내에서 페이지를 만들 수 있습니다.

NOTE
편집기 클라이언트 라이브러리는 가 cq.shared 네임스페이스 및 JavaScript 오류가 없는 경우 Uncaught TypeError: Cannot read property 'shared' of undefined 이 됩니다.
모든 샘플 컨텐츠 페이지에는 다음이 포함되어 있습니다. cq.shared를 기반으로 하는 모든 컨텐츠는 자동으로 다음을 포함합니다. cq.shared. 그러나 샘플 컨텐츠를 기반으로 컨텐츠 페이지를 만들지 않고 처음부터 새로 작성하기로 결정하는 경우, 컨텐츠를 반드시 포함해야 합니다 cq.shared 네임스페이스.
자세한 내용은 클라이언트측 라이브러리 사용 추가 정보.

기존 템플릿 사용 가능 making-an-existing-template-available

이 예에서는 특정 컨텐츠 경로에 템플릿을 사용할 수 있도록 하는 방법을 보여줍니다. 새 페이지를 만들 때 페이지 작성자가 사용할 수 있는 템플릿은 템플릿 가용성.

  1. CRXDE Lite에서 페이지에 사용할 템플릿(예: 뉴스레터 템플릿)으로 이동합니다.

  2. 변경 allowedPaths 속성 및 템플릿 사용 가능. 예, allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*)? 은 이 템플릿이 /content/geometrixx-outdoors.

    chlimage_1-252

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e