클라이언트 라이브러리 및 핵심 구성 요소 client-libraries
핵심 구성 요소는 다양한 클라이언트 라이브러리와 함께 제공되며 자체 라이브러리를 포함할 수 있는 기능을 제공합니다.
제공되는 클라이언트 라이브러리 provided
핵심 구성 요소는 기본적으로 다음과 같은 클라이언트 라이브러리를 제공합니다.
- site clientlib는 사이트에 적용할 구성 요소의 최소한의 기능적 동작을 제공합니다.
- 이는 구현이 프로젝트를 확장하고 맞춤화하여 원하는 모양과 기능을 달성하도록 장려하여 프로젝트를 가속화하는 출발점 역할을 합니다.
- editor clientlib는 작성 대화 상자에 적용되어 예상되는 기능과 모양을 보장합니다.
- editorhook clientlib는 편집 모드로 로드 시 사이트에 적용됩니다.
- 여기에는 편집기가 트리거한 이벤트에서 실행되는 JavaScript 코드가 포함되어 있어 동적 기능의 초기화를 용이하게 합니다.
- 일부 구성 요소에는 Dynamic Media와 함께 사용하는 경우와 같이 특정 상황에서 사용하도록 설계된 특정 추가 clientlib가 포함될 수 있습니다.
클라이언트 라이브러리 포함 including
사용 사례에 따라 클라이언트 라이브러리를 다양한 방식으로 포함시킬 수 있습니다. 다음은 각각 샘플 HTL 스니펫이 포함된 예시입니다.
권장 기본 사용 recommended-default-usage
상황에 맞는 모범 사례를 조사할 시간이 없다면 페이지 head 요소 내부에 다음 HTL 라인을 배치하여 클라이언트 라이브러리를 포함시킵니다.
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
categories='wknd.base', defer=true}">
${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>
페이지head의 CSS와 JS가 여기에 포함되지만, defer 속성을 JS script에 추가하는 경우 스크립트 실행 전에 브라우저는 DOM이 준비 상태가 될 때까지 기다리다가 페이지 로드 속도를 최적화합니다.
기본 사용 basic-usage
해당 CSS 요소 link 및/또는 JS script 요소를 모두 생성하며 클라이언트 라이브러리 범주의 JS 및 CSS가 포함된 기본 구문은 다음과 같습니다.
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>
여러 클라이언트 라이브러리 범주에서 동일한 작업을 동시에 수행하기 위해 문자열 배열을 categories 매개 변수에 전달할 수 있습니다.
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
categories=['wknd.base', 'cq.foundation']}">
${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>
CSS 또는 JS만 해당 css-js-only
CSS는 HTML head 요소에 포함되고, JS는 body 요소를 닫기 직전에 포함되는 경우가 자주 있습니다.
head에서 CSS만 포함되고 JS는 포함되지 않는 경우에 cssIncludes를 사용합니다.
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.cssIncludes @ context="unsafe"}
</sly>
body 닫기 전에 JS만 포함되고 CSS가 포함되지 않는 경우에 jsIncludes를 사용합니다.
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.jsIncludes @ context="unsafe"}
</sly>
속성 attributes
속성을 생성된 CSS link 요소 및/또는 JS script 요소에 적용하려면 다음 여러 매개 변수를 사용합니다.
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
categories='wknd.base',
media='print',
async=true,
defer=true,
onload='console.log(\'loaded: \' + this.src)',
crossorigin='anonymous'}">
${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>
CSS link 속성을 jsAndCssIncludes 및 cssIncludes에 전달할 수 있습니다.
media: string JSscript속성을jsAndCssIncludes및jsIncludes에 전달할 수 있습니다.async: 부울defer: 부울onload: 문자열crossorigin: 문자열
인라인 inlining
최적화, 이메일 또는 AMP 중 어떠한 경우든 CSS 또는 JS를 HTML 출력으로 인라인해야 합니다.
CSS를 인라인하려면 cssInline를 사용할 수 있으며, 이 경우 주변 style 요소를 작성해야 합니다.
<style type="text/css"
data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.cssInline @ context="unsafe"}
</style>
마찬가지로 JS를 인라인하려면 jsInline를 사용할 수 있으며, 이 경우 주변 script 요소를 작성해야 합니다.
<script type="text/javascript"
data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.jsInline @ context="unsafe"}
</script>
텍스트 인식 CSS 및 JavaScript 로드 중 context-aware-loading
페이지 구성 요소는 로드 중인 개발자 정의된 컨텍스트 인식 CSS, JavaScript 또는 메타 태그를 지원합니다.
이는 다음 구조를 사용하는 com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig의 컨텍스트 인식 리소스를 통해 수행됩니다.
com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
- prefixPath="/some/path"
+ item01
- element=["link"|"script"|"meta"]
- location=["header"|"footer"]
+ attributes
- attributeName01="attributeValue01"
- attributeName02="attributeValue02"
...
+ item02
...
...
자세한 내용은 페이지 구성 요소에 대한 기술 설명서를 참조하십시오.