HTL 언어 정리 (3. 블록문)

이전 글 : https://thinking-it.tistory.com/30

HTL 언어 정리 (2. 표현식 옵션)

 

해당 글은 아래 출처에서 가져온 것으로 자세한 것은 출처로 이동하여 봐주시길 바랍니다.

자료 출처 : https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#121-display-context

해당 자료의 길이가 길어 분할하여 업로드하려고 합니다.

 

2.블록문

2.1 통사론

HTL 블록 플러그인은 data-sly-*HTML 요소에 설정된 속성으로 정의됩니다. 요소에는 닫는 태그가 있거나 자동으로 닫힐 수 있습니다. 속성은 값(정적 문자열 또는 표현식일 수 있음)을 갖거나 단순히 부울 속성(값 없음)일 수 있습니다. 속성 값은 작은따옴표, 큰따옴표 또는 인용 부호가 없을 수 있습니다.

<tag data-sly-BLOCK></tag>                                 <!--/* A block is simply consists in a data-sly attribute set on an element. */-->
<tag data-sly-BLOCK/>                                      <!--/* Empty elements (without a closing tag) should have the trailing slash. */-->
<tag data-sly-BLOCK="string value"/>                       <!--/* A block statement usually has a value passed, but not necessarily. */-->

<!--/* The passed value can be an expression as well. */-->
<tag data-sly-BLOCK="${expression}"
     data-sly-BLOCK='${expression}'
     data-sly-BLOCK=${expression}/>
     
<tag data-sly-BLOCK="${@ myArg='foo'}"/>                   <!--/* Or a parametric expression with arguments. */-->
<tag data-sly-BLOCKONE="value" data-sly-BLOCKTWO="value"/> <!--/* Several block statements can be set on a same element. */-->

평가된 모든 data-sly-*속성은 생성된 마크업에서 제거됩니다.

 

2.1.1. 식별자

블록 문 뒤에는 식별자가 올 수도 있습니다.

<tag data-sly-BLOCK.IDENTIFIER="value"></tag>

식별자는 블록 문에서 다양한 방식으로 사용할 수 있습니다.

<!--/* Example of statements that use the identifier to set a variable with their result: */-->
<div data-sly-use.navigation="MyNavigation">${navigation.title}</div>
<div data-sly-test.isEditMode="${wcmmode.edit}">${isEditMode}</div>
<div data-sly-list.child="${currentPage.listChildren}">${child.properties.jcr:title}</div>
<div data-sly-template.nav>Hello World</div>
 
<!--/* The attribute statement uses the identifier to know to which attribute it should apply it's value: */-->
<div data-sly-attribute.title="${properties.jcr:title}"></div> <!--/* This will create a title attribute */-->

최상위 최상위 식별자는 대소문자를 구분하지 않지만(대소문자를 구분하지 않는 HTML 속성을 통해 설정할 수 있기 때문에) 모든 속성은 대소문자를 구분합니다.

 

2.2. 사용 가능한 블록 문

2.2.1. 사용

data-sly-use:

• 템플릿에 논리를 노출합니다.
• 요소: 항상 표시됩니다.
• 속성 값: 필수; 로 평가 String; 인스턴스화할 개체입니다.
• 속성 식별자: 선택적; 인스턴스화된 로직에 액세스하기 위한 사용자 정의된 식별자 이름 식별자가 제공되지 않으면 인스턴스화된 논리를 useBean식별자 이름으로 사용할 수 있습니다.
• 범위: 블록 요소 에 의해 설정된 식별자 data-sly-use는 스크립트에 대해 전역적이며 선언 후 어디에서나 사용할 수 있습니다.

${customPage.foo} <!--/* this fails */-->
<div data-sly-use.customPage="CustomPage">Hello World</div>
${customPage.foo} <!--/* but this works */-->

지정된 논리를 초기화하고 현재 탬플릿에서 사용할 수 있도록 합니다.

<div data-sly-use.page="customPage.js">${page.foo}</div>

a data-sly-use가 설정된 요소와 해당 콘텐츠가 렌더링됩니다(단순히 data-sly-use출력에서 ​​특성 제거).

<div class="foo" data-sly-use.customPage="CustomPage">Hello World</div>
<!--/* outputs: */-->
<div class="foo">Hello World</div>

표현식 옵션을 사용하여 매개변수를 Use-API에 전달할 수 있습니다.

<div data-sly-use.nav="${'Navigation' @ depth=1, showVisible=!wcmmode.edit}">${nav.foo}</div>

Use-API 작동 방식에 대한 자세한 내용은 Use-API 섹션 에서 확인할 수 있습니다 .

use 문을 사용하여 외부 템플릿을 로드할 수도 있습니다. 이 사용법 은 템플릿 및 호출 섹션 을 참조하십시오 .

 

2.2.2. 텍스트

data-sly-text:

• 현재 요소의 내용을 설정합니다.
• 요소: 항상 표시됩니다.
• 요소 내용: 평가 결과로 대체됨.
• 속성 값: 필수; 로 평가 String; 요소 내용.
• 속성 식별자: 없음.

내용은 단순히 표현식을 작성하거나 data-sly-text속성을 지정하여 작성될 수 있습니다. 이렇게 하면 모의 콘텐츠를 수정하지 않고 디자이너의 HTML에 주석을 달 수 있습니다.

<p data-sly-text="${properties.jcr:title}">This text would never be shown.</p>

달리 명시되지 않는 한 data-sly-text속성 의 내용은 컨텍스트와 함께 자동으로 XSS로 보호됩니다.

<p data-sly-text="${'<strong>Bold and Proud</strong>' @ context='html'}"></p>
<!--/* outputs: */-->
<p><strong>Bold and Proud</strong></p>

거짓 변수는 특별히 처리되지 않고 단순히 문자열로 캐스트 됩니다.

<p data-sly-text="${''}"></p>    <!--/* outputs: */--> <p></p>
<p data-sly-text="${[]}"></p>    <!--/* outputs: */--> <p></p>
<p data-sly-text="${0}"></p>     <!--/* outputs: */--> <p>0</p>
<p data-sly-text="${false}"></p> <!--/* outputs: */--> <p>false</p>

 

2.2.3. 기인하다

data-sly-attribute:

• 현재 요소에 속성 또는 속성 그룹을 설정합니다.
• 요소: 항상 표시됩니다.
• 요소 내용: 항상 표시됩니다.
• 속성 값: 선택사항; String속성 내용 Boolean을 설정하거나 부울 속성을 Object설정하거나 여러 속성을 설정하기 위해; 값이 생략된 경우 속성을 제거합니다.
• 속성 식별자: 선택적; 속성 이름; 속성 값이 Object인 경우에만 생략해야 합니다.

속성은 단순히 표현식을 작성하거나 data-sly-attribute.*속성을 지정하여 작성할 수 있습니다. 이렇게 하면 모의 콘텐츠를 수정하지 않고 디자이너의 HTML에 주석을 달 수 있습니다.

<tag class="className" data-sly-attribute.class="${myVar}"></tag> <!--/* This will overwrite the content of the class attribute */-->
<tag data-sly-attribute.data-values="${myValues}"></tag>          <!--/* This will create a data-values attribute */-->

속성 이름을 지정하지 않고 블록 요소를 사용 data-sly-attribute하면 키-값 쌍을 포함하는 맵 개체에 준비된 여러 속성을 한 번에 주입할 수 있습니다.

<input data-sly-attribute="${foobar}" type="text"/>
<!--/* outputs for instance: */-->
<input id="foo" class="bar" type="text"/>
<!--
    assuming that foobar = {'id' : 'foo', 'class' : 'bar'}
-->

달리 명시되지 않는 한 속성 이름과 콘텐츠는 그에 따라 자동으로 XSS로 보호됩니다.

<input type="number" name="quantity" min="${qttMin @ context='number'}" max="${qttMax @ context='number'}"/>

이벤트 핸들러 속성( on*) 및 style속성은 이러한 속성이 포함할 수 있는 값의 범위를 고려할 때 사용 가능한 디스플레이 컨텍스트 중 어느 것도 XSS 공격으로부터 완전히 보호할 수 없기 때문에 생성할 수 없습니다.

 

2.2.3.1 자세한 예

아래의 모든 예에서 컨텍스트에서 다음 개체를 사용할 수 있음을 고려하십시오.

foobar = {'id': 'foo', 'class': 'bar', 'lang': ''}

속성은 왼쪽에서 오른쪽으로 처리됩니다.

<div class="bar1" data-sly-attribute.class="bar2" data-sly-attribute="${foobar}"></div>
<!--/* outputs: */-->
<div id="foo" class="bar"></div>
 
<div data-sly-attribute="${foobar}" data-sly-attribute.class="bar2" id="foo2"></div>
<!--/* outputs: */-->
<div id="foo2" class="bar2"></div>

문자열 값이 비어 있으면 속성이 제거됩니다.

<div lang="${''}"></div>
<div lang="en" data-sly-attribute.lang></div>
<div lang="en" data-sly-attribute.lang=""></div>
<div lang="en" data-sly-attribute.lang="${''}"></div>
<!--/* All of the above output: */-->
<div></div>

<div lang="en" data-sly-attribute="${foobar}"></div>
<!--/* outputs: */-->
<div id="foo" class="bar"></div>

그래도 data-sly-attribute가 적용되지 않으면 빈 속성은 그대로 남습니다.

<div title="" data-sly-attribute="${foobar}"></div>
<!--/* outputs: */-->
<div title="" id="foo" class="bar"></div>

부울 값을 사용하면 부울 속성의 표시를 제어할 수 있습니다.

<input checked="${true}"/>
<input data-sly-attribute.checked="${true}"/>
<!--/* Both output: */-->
<input checked/>
 
<input checked="${false}"/>
<input data-sly-attribute.checked="${false}"/>
<!--/* Both output: */-->
<input/>
 
<!--/* But 'true' or 'false' strings don't work the same way: */-->
<input checked="${'true'}"/>  <!--/* outputs: */--> <input checked="true"/>
<input checked="${'false'}"/> <!--/* outputs: */--> <input checked="false"/>
 
<!--/* Consider having attrs={'checked': true} */-->
<input data-sly-attribute="${attrs}"/>
<!--/* outputs: */-->
<input checked/>

배열은 문자열로 캐스트됩니다.

<div title="${['one', 'two', 'three']}"></div>
<!--/* outputs: */-->
<div title="one,two,three"></div>
 
<!--/* Like empty strings, empty arrays remove the attribute: */-->
<div title="${[]}"></div>
<!--/* outputs: */-->
<div></div>
 
<!--/* But an array containing just an empty string doesn't get removed: */-->
<div title="${['']}"></div>
<!--/* outputs: */-->
<div title=""></div>

숫자는 문자열로 변환됩니다 (예 : 0은 속성을 제거하지 않음)

<div class="${0}"></div>
<!--/* outputs: */-->
<div class="0"></div>

 

2.2.4. 요소

data-sly-element:

• 요소의 태그 이름을 바꿉니다.
• 요소: 항상 표시됩니다.
• 요소 내용: 항상 표시됩니다.
• 속성 값: 필수; String; 요소의 태그 이름.
• 속성 식별자: 없음.

h1..h6, th, td, ul, ol와 같은 요소 태그를 설정하는 데 주로 유용한 요소를 변경합니다.

<div data-sly-element="${'h1'}">Blah</div>
<!--/* outputs: */-->
<h1>Blah</h1>

 

요소 이름은 <script>, <style>, <form> 또는 <input>같은 요소를 허용하지 않는 컨텍스트 elementName로 자동으로 XSS로 보호됩니다 ( 정확한 목록 은 디스플레이 컨텍스트 섹션 참조).

 

2.2.5. 시험

data-sly-test:

• 속성 값에 따라 요소를 유지하거나 제거합니다.
• 요소: 테스트가 true로 평가되는 경우 표시됩니다.
• 요소 내용: 테스트가 true로 평가되는 경우 표시됩니다.
• 속성 값: 선택사항; Boolean로 평가됩니다(그러나 변수에 노출되었을 때 Boolean유형 케이스가 아닌 ). false값이 생략된 경우로 평가됩니다.
• 속성 식별자: 선택적; 테스트 결과에 액세스하기 위한 식별자 이름입니다.
• 범위: 블록 요소 data-sly-test에 의해 설정된 식별자는 스크립트에 대해 전역적이며 선언 후 어디에서나 사용할 수 있습니다.

<p data-sly-test.editOrDesign="${wcmmode.edit || wcmmode.design}">displays the content when in `edit` or `design` mode</p>
<p data-sly-test="${!editOrDesign && pageProperties.jcr:title}">displays the content when in `edit` or `design` mode and the `pageProperties` contain a non-empty `jcr:title` property</p>

식이 false로 평가되면 마크업에서 전체 요소를 제거합니다.

<p data-sly-test="${wcmmode.edit}">You are in edit mode</p>
<p data-sly-test>This paragraph will never display</p>

식별자에는 조건 값이 그대로 포함되어 있습니다(Boolean값으로 캐스팅하지 않음).

<p data-sly-test.myVar="${'foo'}">${myVar}</p>
<!--/* outputs: */-->
<p>foo</p>

 

2.2.6. 목록

data-sly-list:

• 속성 값에 있는 각 항목의 내용을 반복하여 다음 옵션을 통해 반복을 제어할 수 있습니다.
  • begin- 지정된 인덱스에 있는 항목에서 반복이 시작됩니다. 컬렉션의 첫 번째 항목의 인덱스는 0입니다.
  • step - 반복은 첫 번째 항목부터 시작하여 컬렉션의 모든 단계 항목만 처리합니다.
  • end - 반복은 지정된 인덱스(포함)에 있는 항목에서 끝납니다.
• 요소: 속성 값의 항목 수가 0보다 크거나 속성 값이 문자열 또는 숫자인 경우에만 표시됩니다. begin 값이 사용되면 값이 컬렉션 크기보다 작은 begin경우에만 요소가 표시됩니다 .
• 요소 내용: 속성 값에 있는 항목 수만큼 반복됩니다.
• 속성 값: 선택사항; 반복할 항목; 생략하면 내용이 표시되지 않습니다.
• 속성 식별자: 선택적; 목록 요소 내의 항목에 액세스하기 위한 사용자 지정 식별자 이름입니다. 식별자가 제공되지 않으면 블록 요소는 암시적 item으로 현재 반복의 요소에 액세스하기 위해 식별자를 사용할 수 있게 합니다.
• 범위: 블록 요소 에 의해 설정된 식별자 data-sly-list는 요소의 콘텐츠 범위에서만 사용할 수 있습니다. 식별자는 범위에서 사용할 수 있는 동일한 이름을 가진 다른 식별자를 재정의하지만 해당 값은 요소 범위 외부에서 한 번 복원됩니다.

제공된 객체(배열 또는 반복 가능한 객체일 수 있음)의 각 항목에 대해 요소의 내용을 반복합니다.

<!--/* By default the 'item' identifier is defined within the loop. */-->
<ul data-sly-list="${currentPage.listChildren}">
    <li>${item.title}</li>
</ul>

<!--/* This is how the name of the 'item' identifier can be customised. */-->
<ul data-sly-list.childPage="${currentPage.listChildren}">
    <li>${childPage.title}</li>
</ul>

<!--/* Iteration control; start from the beginning, stop after the first 10 elements (index 9) */-->
<ul data-sly-list="${currentPage.listChildren @ begin = 0, end = 9}">
    <li>${item.title}</li>
</ul>

<!--/* Iteration control; start from the 11th element (index 10), stop after the next 10 elements (index 19) */-->
<ul data-sly-list="${currentPage.listChildren @ begin = 10, end = 19}">
    <li>${item.title}</li>
</ul>

추가 itemList(각각 <variable>List사용자 지정 식별자/변수가 를 사용하여 정의된 경우 data-sly-list.<variable>) 식별자는 범위 내에서 다음 멤버와 함께 사용할 수도 있습니다.

• index: 제로 기반 카운터( 0..length-1);
• count: 1 기반 카운터( 1..length);
• first: true반복되는 첫 번째 요소의 경우;
• middle: true반복되는 요소가 첫 번째도 마지막도 아닌 경우;
• last: true반복되는 마지막 요소의 경우;
• odd: 홀수 인 true경우 ;count
• even: 짝수인 true경우 count.

개체를 반복할 때 Map항목 변수에는 각 맵 항목의 키가 포함됩니다.

<dl data-sly-list="${myMap}">
    <dt>key: ${item}</dt>
    <dd>value: ${myMap[item]}</dd>
</dl>

 

2.2.7. 반복하다

data-sly-repeat:

• 속성 값의 각 항목 내용을 반복하고 속성 값의 항목 수만큼 포함 요소를 표시하여 다음 옵션을 통해 반복을 제어할 수 있습니다.
  • begin- 지정된 인덱스에 있는 항목에서 반복이 시작됩니다. 컬렉션의 첫 번째 항목의 인덱스는 0입니다.
  • step - 반복은 첫 번째 항목부터 시작하여 컬렉션의 모든 단계 항목만 처리합니다.
  • end - 반복은 지정된 인덱스(포함)에 있는 항목에서 끝납니다.
• 요소: 속성 값의 항목 수가 0보다 크거나 속성 값이 문자열 또는 숫자인 경우에만 표시됩니다.
• 요소 내용: 속성 값에 있는 항목 수만큼 반복됩니다.
• 속성 값: 선택사항; 반복할 항목; 생략하면 포함 요소와 그 내용이 표시되지 않습니다.
• 속성 식별자: 선택적; 반복 요소 내의 항목에 액세스하기 위한 사용자 정의된 식별자 이름 식별자가 제공되지 않으면 블록 요소는 암시적 item으로 현재 반복의 요소에 액세스하기 위해 식별자를 사용할 수 있게 합니다.
• 범위: 블록 요소 에 의해 설정된 식별자 data-sly-repeat는 요소의 범위에서만 사용할 수 있습니다. 식별자는 범위에서 사용할 수 있는 동일한 이름을 가진 다른 식별자를 재정의하지만 해당 값은 요소 범위 외부에서 한 번 복원됩니다.

제공된 객체(배열 또는 반복 가능한 객체일 수 있음)의 각 항목에 대해 요소의 내용을 반복합니다.

<!--/* By default the 'item' identifier is defined within the loop. */-->
<p data-sly-repeat="${resource.listChildren}">${item.text}</p>

<!--/* This is how the name of the 'item' identifier can be customised. */-->
<p data-sly-repeat.childResource="${resource.listChildren}">${childResource.text}</p>

<!--/* The 'item' identifier can be used on the defining element. */-->
<div data-sly-repeat.article="${articlesCollection}" id="${article.id}">${article.excerpt}</div>

<!--/* Iteration control; start from the beginning, stop after the first 10 elements (index 9) */-->
<div data-sly-repeat.article="${articlesCollection @ begin = 0, end = 9}" id="${article.id}">${article.excerpt}</div>

추가 itemList(각각 <variable>List 사용자 지정 식별자/변수가 data-sly-repeat를 사용하여 정의된 경우) 식별자는 범위 내에서 다음 멤버와 함께 사용할 수도 있습니다.

• index: 제로 기반 카운터( 0..length-1);
• count: 1 기반 카운터( 1..length);
• first: true반복되는 첫 번째 요소의 경우;
• middle: true반복되는 요소가 첫 번째도 마지막도 아닌 경우;
• last: true반복되는 마지막 요소의 경우;
• odd: 홀수 인 true경우 ;count
• even: 짝수인 true경우 count.

개체를 반복할 때 Map항목 변수에는 각 맵 항목의 키가 포함됩니다.

<p data-sly-repeat="${myMap}">
    <span>key: ${item}</span>
    <span>value: ${myMap[item]}</span>
</p>

 

2.2.8. 포함하다

data-sly-include:

• 현재 컨텍스트로 실행되는 렌더링 스크립트의 출력을 포함합니다.
• 요소: 항상 표시됩니다.
• 요소 내용: 포함된 스크립트의 내용으로 대체됩니다.
• 속성 값: 필수; 포함할 파일.
• 속성 식별자: 없음.

현재 요청 컨텍스트로 실행되는 렌더링 스크립트의 출력을 포함하여 제어를 현재 HTL 스크립트로 다시 전달합니다.

참고: 이것은 JSP 와 비슷합니다 <%@ include file="" %>.

<div data-sly-include="template.html"></div>
<div data-sly-include="template.jsp"></div>
 
<!--/* Following statements are equivalent: */-->
<div data-sly-include="template.html"></div>
<div data-sly-include="${'template.html'}"></div>

식을 사용하면 더 많은 경로 조작 옵션을 지정할 수 있습니다. 경로는 현재 렌더링 컨텍스트를 기준으로 해결됩니다.

• appendPath- 전달된 경로에 내용을 추가합니다.
• prependPath- 내용을 전달된 경로 앞에 추가합니다.

<div data-sly-include="${'partials' @ appendPath='template.html'}"></div>
<!--/* will include partials/template.html */-->

<div data-sly-include="${'template.html' @ prependPath='partials'}"></div>
<!--/* will include partials/template.html */-->

<div data-sly-include="${'components' @ prependPath='partials', appendPath='template.html'}"></div>
<!--/* will include partials/components/template.html */-->

data-sly-include가 설정된 요소는 무시되고 표시되지 않습니다.

<!--/* Following will simply output the rendered content of the template, the complete <div> element will be ignored */-->
<div id="test-one" class="test-two" data-sly-include="template.html">Foo</div>
<!--/* outputs only the result of template.html */-->

data-sly-include 문의 범위는 포함된 리소스의 템플릿으로 전달되지 않습니다.

 

2.2.9. 자원

data-sly-resource:

• 렌더링된 리소스를 포함합니다.
• 요소: 항상 표시됩니다.
• 요소 내용: 리소스의 내용으로 대체됩니다.
• 속성 값: 필수; 포함할 경로.
• 속성 식별자: 없음.

절대 또는 상대 경로를 사용하여 동일한 서버에서 렌더링된 리소스를 포함합니다. 구현은 출력을 검색할 때 새 요청 컨텍스트를 생성해야 합니다.

참고: 이것은 <jsp:include page="" />.

<!--/* Following statements are equivalent: */-->
<section data-sly-resource="./path"></section>
<section data-sly-resource="${'./path'}"></section>

표현식을 사용하면 더 많은 옵션을 지정할 수 있습니다.

• appendPath- 전달된 경로에 내용을 추가합니다.
• prependPath- 내용을 전달된 경로 앞에 추가합니다.

<section data-sly-resource="${'my/path' @ appendPath='appended/path'}"></section>
<!--/* Will include my/path/appended/path */-->
<section data-sly-resource="${'my/path' @ prependPath='prepended/path'}"></section>
<!--/* Will include prepended/path/my/path */-->

• selectors- 원래 요청의 모든 선택자를 전달된 경로를 포함하기 전에 선택자 문자열 또는 선택자 배열에 전달된 선택자로 바꿉니다.

<!--/* Manipulating selectors: */-->
<section data-sly-resource="${'my/path' @ selectors='selector1.selector2'}"></section>
<section data-sly-resource="${'my/path' @ selectors=['selector1', 'selector2']}"></section>

• addSelectors- 전달된 경로를 포함하기 전에 전달된 선택기 문자열 또는 선택기 배열의 선택기를 원래 요청에 추가합니다.

<section data-sly-resource="${'my/path' @ addSelectors='selector1.selector2'}"></section>
<section data-sly-resource="${'my/path' @ addSelectors=['selector1', 'selector2']}"></section>

• removeSelectors- 전달된 경로를 포함하기 전에 원래 요청에서 전달된 선택기 문자열 또는 선택기 배열에서 발견된 선택기를 제거합니다. 옵션에 값이 없으면 원래 요청에서 모든 선택기가 제거됩니다.

<section data-sly-resource="${'my/path' @ removeSelectors='selector1.selector2'}"></section>
<section data-sly-resource="${'my/path' @ removeSelectors=['selector1', 'selector2']}"></section>
<section data-sly-resource="${'my/path' @ removeSelectors}"></section>

• resourceType- 재정의된 리소스 유형에 매핑된 스크립트를 사용하여 전달된 경로의 렌더링을 강제합니다.

<section data-sly-resource="${'./path' @ resourceType='my/resource/type'}"></section>

data-sly-resource 문의 범위는 포함된 리소스의 템플릿으로 전달되지 않습니다.

 

2.2.10 템플릿 및 호출

템플릿 블록은 함수 호출처럼 사용할 수 있습니다. 선언에서 매개변수를 가져올 수 있으며 호출할 때 전달될 수 있습니다. 그들은 또한 재귀를 허용합니다.

 

2.2.10.1 템플릿

data-sly-template:

• HTML 블록을 선언하고 식별자로 이름을 지정하고 가져올 수 있는 매개변수를 정의합니다.
• 요소: 표시되지 않음.
• 요소 내용 : data-sly-call로 템플릿을 호출할 때 표시됩니다.
• 속성 값: 선택사항; 얻을 수 있는 매개변수를 정의하는 옵션만 있는 표현식.
• 속성 식별자: 필수; 선언할 템플릿 식별자입니다.
• 범위: 블록 요소에 의해 설정된 식별자 data-sly-template는 전역적이며 템플릿 정의 전후에 액세스되는지 여부에 관계없이 사용할 수 있습니다. 다른 블록 요소의 도움으로 생성된 동일한 이름의 식별자는 data-sly-template에서 설정한 식별자 값을 재정의할 수 있습니다.

 

2.2.10.2. 부르다

data-sly-call:

• 선언된 HTML 블록을 호출하여 매개변수를 전달합니다.
• 요소: 항상 표시됩니다.
• 요소 내용: 호출된 data-sly-template요소의 내용으로 대체됩니다.
• 속성 값: 필수; 전달할 템플릿 식별자와 매개변수를 정의하는 표현식입니다.
• 속성 식별자: 없음.

2.2.10.3. 예

매개변수가 없는 정적 템플릿:

<template data-sly-template.one>blah</template>
<div data-sly-call="${one}"></div>

data-sly-call문의 범위는 블록 data-sly-template에서 상속되지 않습니다. 변수를 전달하려면 변수를 매개변수로 전달해야 합니다.

<template data-sly-template.two="${@ title, resource='The resource of the parent node'}"> <!--/* Notice the usage hint on the resource parameter. */-->
    <h1>${title}</h1>
    <p>Parent: ${resource.name}</p>
</template>
<div data-sly-call="${two @ title=properties.jcr:title, resource=resource.parent}"></div>

템플릿이 별도의 파일에 있는 경우 다음을 사용하여 로드할 수 있습니다.

<div data-sly-use.lib="templateLib.html" data-sly-call="${lib.one}"></div>
<div data-sly-call="${lib.two @ title=properties.jcr:title, resource=resource.parent}"></div>

 

템플릿 호출에서 일부 매개변수가 누락된 경우 해당 매개변수는 템플릿 내에서 빈 문자열로 초기화됩니다.

 

 

2.2.11. 풀다

data-sly-unwrap:

• 요소를 언래핑합니다.
• 요소: 표현식이 로 평가되는 경우 표시됩니다 false.
• 요소 내용: 항상 표시됩니다.
• 속성 값: 선택사항; 로 평가되는 표현식 Boolean; true값이 생략된 경우 기본값 입니다.
• 속성 식별자: 선택적; 테스트 결과에 액세스하기 위한 식별자 이름입니다.
• 범위: 블록 요소 에 의해 설정된 식별자 data-sly-unwrap는 스크립트에 대해 전역적이며 선언 후 어디에서나 사용할 수 있습니다.

data-sly-unwrap요소 자체를 숨기고 해당 콘텐츠만 표시하는 데 사용할 수 있습니다.

<!--/* This will only show "Foo" (without a <div> around) if the test is true: */-->
<div data-sly-test="${myTest}" data-sly-unwrap>Foo</div>
 
<!--/* This would show a <div> around "Foo" only if the test is false: */-->
<div data-sly-unwrap="${myTest}">Foo</div>

<!--/* Scope: script global */-->
<p data-sly-unwrap.richText="${configuration.text.isRich}">${sectionA}</p>
<p data-sly-unwrap="${richText}">${sectionB}</p>

 

2.2.12. 세트

data-sly-set:

• 미리 정의된 값으로 새 식별자를 정의합니다.
• 요소: 항상 표시됩니다.
• 요소 내용: 항상 표시됩니다.
• 속성 값: 선택사항; 제공된 식별자에 저장할 값입니다.
• 속성 식별자: 필수; 저장된 값에 액세스하기 위한 식별자 이름입니다.
• 범위: 블록 요소 에 의해 설정된 식별자 data-sly-set는 스크립트에 대해 전역적이며 선언 후 어디에서나 사용할 수 있습니다.

<span data-sly-set.profile="${user.profile}">Hello, ${profile.firstName} ${profile.lastName}!</span>
<a class="profile-link" href="${profile.url}">Edit your profile</a>

 

2.3. 블록 문 우선 순위

동일한 요소에서 사용될 때 다음 우선 순위 목록은 블록 문이 평가되는 방법을 정의합니다.

1. data-sly-template
2. data-sly-set, data-sly-test,data-sly-use
3. data-sly-call
4. data-sly-text
5. data-sly-element, data-sly-include,data-sly-resource
6. data-sly-unwrap
7. data-sly-list,data-sly-repeat
8. data-sly-attribute

두 개의 블록 문이 우선 순위가 같은 경우 평가 순서는 왼쪽에서 오른쪽입니다.