Show Menu
화제×

클라이언트측 라이브러리 사용

최신 웹 사이트에서는 복잡한 JavaScript 및 CSS 코드를 기반으로 하는 클라이언트측 처리에 크게 의존합니다. 이 코드의 제공을 구성하고 최적화하는 것은 복잡한 문제가 될 수 있습니다.
이 문제를 해결하는 데 도움이 되도록 AEM에서는 클라이언트측 코드를 저장소에 저장하고, 카테고리로 구성하고, 각 코드 카테고리가 클라이언트에 제공될 시기 및 방법을 정의할 수 있는 클라이언트측 라이브러리 폴더를 ​제공합니다. 그러면 클라이언트측 라이브러리 시스템은 최종 웹 페이지에서 올바른 링크를 만들어 올바른 코드를 로드합니다.

AEM에서 클라이언트측 라이브러리 작동 방식

페이지의 HTML에 클라이언트측 라이브러리(즉, JS 또는 CSS 파일)를 포함하는 표준 방법은 해당 페이지의 JSP에 해당 파일에 대한 경로를 포함하는 <script> 또는 <link> 태그를 단순히 포함시키는 것입니다. 예,
...
<head>
   ...
   <script type="text/javascript" src="/etc/clientlibs/granite/jquery/source/1.8.1/jquery-1.8.1.js"></script>
   ...
</head>
...

이 방법은 AEM에서 작동하지만 페이지와 구성 요소가 복잡해질 때 문제를 초래할 수 있습니다. 이러한 경우 동일한 JS 라이브러리의 여러 사본이 최종 HTML 출력에 포함될 수 있습니다. 이를 방지하고 클라이언트측 라이브러리의 논리적 구성을 허용하려면 AEM에서 클라이언트측 라이브러리 폴더를 사용합니다 .
클라이언트측 라이브러리 폴더는 유형의 저장소 노드입니다 cq:ClientLibraryFolder . CND 표기법의 정의입니다 .
[cq:ClientLibraryFolder] > sling:Folder
  - dependencies (string) multiple
  - categories (string) multiple
  - embed (string) multiple
  - channels (string) multiple

기본적으로, 노드 cq:ClientLibraryFolder 는 저장소의 /apps 및 하위 트리 내 /libs 의 어느 곳에서나 삽입할 수 있으며, 이러한 기본값 및 기타 설정은 시스템 콘솔 /etc Adobe Granite HTML Library Manager 패널을 통해 제어할 수 configMgr있습니다.
cq:ClientLibraryFolder 은 몇 개의 지원 파일과 함께 JS 및/또는 CSS 파일 세트로 채워집니다(아래 참조). 의 속성은 다음과 같이 cq:ClientLibraryFolder 구성됩니다.
  • categories : 이 안에 있는 JS 및/또는 CSS 파일 세트가 속하는 카테고리를 cq:ClientLibraryFolder 식별합니다. 다중 값을 갖는 categories 속성은 라이브러리 폴더를 두 개 이상의 카테고리에 포함할 수 있도록 합니다(유용할 수 있는 방법은 아래 참조).
  • dependencies : 이 라이브러리 폴더가 종속된 다른 클라이언트 라이브러리 카테고리 목록입니다. 예를 들어, 주어진 두 개의 cq:ClientLibraryFolder 노드 F 와 주어진 파일이 제대로 기능하기 위해 다른 파일이 필요한 경우, 그 G 에 있는 파일 중 적어도 하나 F G Coverity의 categories 한 개 이상 G dependencies F 에 있어야 합니다.
  • embed : 다른 라이브러리의 코드를 임베드하는 데 사용됩니다. 노드 F가 노드 G와 H를 포함하는 경우 결과 HTML은 노드 G 및 H의 컨텐츠가 포함됩니다.
  • allowProxy : 클라이언트 라이브러리가 아래에 있는 경우 이 등록 정보 /apps 는 프록시 서블릿을 통해 클라이언트 라이브러리에 액세스할 수 있습니다. 클라이언트 라이브러리 폴더 찾기 및 아래의 프록시 클라이언트 라이브러리 서블릿 사용을 참조하십시오.

클라이언트측 라이브러리 참조

HTL이 AEM 사이트 개발을 위한 선호 기술이므로 AEM에 클라이언트측 라이브러리를 포함하는 데 HTL을 사용해야 합니다. 그러나 JSP를 사용하여 수행할 수도 있습니다.

HTL 사용

HTL에서 클라이언트 라이브러리는 AEM에서 제공하는 도우미 템플릿을 통해 로드되며, 이 템플릿은 AEM을 통해 액세스할 수 있습니다 . 이 파일에서 사용할 수 있는 세 가지 템플릿은 다음을 통해 호출할 수 있습니다.
  • css - 참조된 클라이언트 라이브러리의 CSS 파일만 로드합니다.
  • js - 참조된 클라이언트 라이브러리의 JavaScript 파일만 로드합니다.
  • all - 참조된 클라이언트 라이브러리의 모든 파일(CSS와 JavaScript 모두)을 로드합니다.
각 헬퍼 템플릿에는 원하는 클라이언트 라이브러리를 참조하는 categories 옵션이 필요합니다. 이 옵션은 문자열 값의 배열 또는 쉼표로 구분된 값 목록을 포함하는 문자열일 수 있습니다.
자세한 내용 및 사용 예는 HTML 템플릿 언어 시작하기 문서를 참조하십시오 .

JSP 사용

생성된 HTML 페이지에서 클라이언트 라이브러리에 링크를 추가하려면 JSP 코드에 태그를 ui:includeClientLib 추가합니다. 라이브러리를 참조하려면 노드의 categories 속성 값을 ui:includeClientLib 사용합니다.
<%@taglib prefix="ui" uri="https://www.adobe.com/taglibs/granite/ui/1.0" %>
<ui:includeClientLib categories="<%= categories %>" />

예를 들어 노드 /etc/clientlibs/foundation/jquery 는 값 cq:ClientLibraryFolder 의 카테고리 속성이 있는 유형입니다 cq.jquery . JSP 파일의 다음 코드가 라이브러리를 참조합니다.
<ui:includeClientLib categories="cq.jquery"/>

생성된 HTML 페이지에는 다음 코드가 포함되어 있습니다.
<script type="text/javascript" src="/etc/clientlibs/foundation/jquery.js"></script>

JS, CSS 또는 테마 라이브러리 필터링을 위한 속성을 비롯한 자세한 내용은 ui:includeClientLib을 참조하십시오 .
<cq:includeClientLib> 이전에는 클라이언트 라이브러리를 포함하는 데 일반적으로 사용되었던 AEM 5.6 이후 더 이상 사용되지 않습니다. 대신 위에 설명된 대로 사용해야 <ui:includeClientLib> 합니다.

클라이언트 라이브러리 폴더 만들기

JavaScript 및 CSS(Cascading Style Sheet) 라이브러리를 정의하고 HTML 페이지에서 사용할 수 있도록 하는 노드를 만듭니다. cq:ClientLibraryFolder 노드의 categories 속성을 사용하여 해당 노드가 속하는 라이브러리 범주를 식별합니다.
노드에는 런타임에 단일 JS 및/또는 CSS 파일로 병합되는 하나 이상의 소스 파일이 포함되어 있습니다. 생성된 파일의 이름은 확장명이 .js 또는 파일 이름인 노드 .css 이름입니다. 예를 들어, 라이브러리 노드 이름 cq.jquery 은 생성된 파일 이름 cq.jquery.js 또는 cq.jquery.css 결과
클라이언트 라이브러리 폴더에는 다음 항목이 포함됩니다.
  • 병합할 JS 및/또는 CSS 소스 파일입니다.
  • 이미지 파일과 같은 CSS 스타일을 지원하는 리소스입니다.
    참고: 하위 폴더를 사용하여 소스 파일을 구성할 수 있습니다.
  • 생성된 JS 및/또는 CSS 파일에 병합할 소스 파일을 식별하는 파일 및/또는 하나의 js.txt css.txt 파일.
위젯의 클라이언트 라이브러리와 관련된 요구 사항에 대한 자세한 내용은 위젯 사용 및 확장을 참조하십시오 .
웹 클라이언트에 노드에 액세스할 수 있는 권한이 있어야 cq:ClientLibraryFolder 합니다. 저장소의 보안 영역에서 라이브러리를 표시할 수도 있습니다(아래 다른 라이브러리의 코드 포함 참조).

/lib에서 라이브러리 재정의

아래 /apps 에 있는 클라이언트 라이브러리 폴더는 유사한 위치에 있는 동일한 이름의 폴더보다 우선합니다 /libs . 예를 들어, /apps/cq/ui/widgets 이 우선합니다 /libs/cq/ui/widgets . 이러한 라이브러리가 동일한 범주에 속하면 아래 라이브러리가 /apps 사용됩니다.

클라이언트 라이브러리 폴더 찾기 및 프록시 클라이언트 라이브러리 서블릿 사용

이전 버전에서는 클라이언트 라이브러리 폴더가 저장소의 아래 /etc/clientlibs 에 있었습니다. 이 기능은 여전히 지원되지만 클라이언트 라이브러리를 아래에서 찾는 것이 좋습니다 /apps . 다른 스크립트 근처에 있는 클라이언트 라이브러리를 찾기 위한 것으로, 일반적으로 /apps 및 아래에 /libs 있습니다.
클라이언트 라이브러리 폴더 아래의 정적 리소스는 리소스라는 폴더에 있어야 합니다 . 이미지 등의 정적 리소스를 폴더 리소스 아래에 있는 ​경우 게시 인스턴스에서 참조할 수 없습니다. 다음은 한 예입니다. http://localhost:4503/etc.clientlibs/geometrixx/components/clientlibs/resources/example.gif
컨텐츠 및 구성에서 코드를 보다 잘 분리하려면 해당 속성을 활용하여 클라이언트 라이브러리 /apps 를 찾아 /etc.clientlibs 노출하는 것이 allowProxy 좋습니다.
클라이언트 라이브러리에 액세스할 수 있도록 /apps 프록시 서버가 사용됩니다. ACL은 클라이언트 라이브러리 폴더에 계속 적용되지만 서블릿은 속성이 로 설정된 /etc.clientlibs/ 경우 컨텐츠를 읽을 수 있도록 allowProxy 허용합니다 true .
정적 리소스는 클라이언트 라이브러리 폴더 아래의 리소스 아래에 있는 경우에만 프록시를 통해 액세스할 수 있습니다.
예:
  • clientlib이 /apps/myproject/clientlibs/foo
  • 정적 이미지가 /apps/myprojects/clientlibs/foo/resources/icon.png
그런 다음 allowProxy 속성을 true로 foo 설정합니다.
  • 그런 다음 /etc.clientlibs/myprojects/clientlibs/foo.js
  • 그런 다음 /etc.clientlibs/myprojects/clientlibs/foo/resources/icon.png
프록시 클라이언트 라이브러리를 사용하는 경우 AEM Dispatcher 구성을 사용하려면 Extension clientlibs가 있는 URI가 허용되도록 업데이트해야 할 수 있습니다.
Adobe는 클라이언트 라이브러리를 아래에서 찾고 프록시 서블릿을 사용하여 사용할 수 있도록 /apps 하는 것이 좋습니다. 하지만 최상의 방법은 공개 사이트에 /apps 또는 경로를 통해 직접 제공되는 모든 것이 포함되지 않도록 하는 /libs 것입니다.

클라이언트 라이브러리 폴더 만들기

  1. 웹 브라우저에서 CRXDE Lite를 엽니다( http://localhost:4502/crx/de ).
  2. 클라이언트 라이브러리 폴더를 찾을 폴더를 선택하고 만들기 > 노드 만들기를 클릭합니다 .
  3. 라이브러리 파일의 이름을 입력하고 유형 목록에서 선택합니다 cq:ClientLibraryFolder . 확인 클릭한 다음 모두 저장을 클릭합니다 .
  4. 라이브러리가 속한 카테고리 또는 범주를 지정하려면 노드를 선택하고 다음 속성을 추가한 cq:ClientLibraryFolder 다음 #을 클릭합니다**.
    • 이름: 카테고리
    • 유형: 문자열
    • 값: 범주 이름
    • 다중: 선택
  5. 어떤 방법으로든 라이브러리 폴더에 소스 파일을 추가합니다. 예를 들어 WebDav 클라이언트를 사용하여 파일을 복사하거나 파일을 만들고 컨텐츠를 수동으로 작성합니다.
    참고: 원하는 경우 하위 폴더에서 소스 파일을 구성할 수 있습니다.
  6. 클라이언트 라이브러리 폴더를 선택하고 만들기 > 파일 만들기를 클릭합니다 .
  7. 파일 이름 상자에 다음 파일 이름 중 하나를 입력하고 확인을 클릭합니다.
    • js.txt : ​이 파일 이름을 사용하여 JavaScript 파일을 생성합니다.
    • css.txt : ​이 파일 이름을 사용하여 계단식 스타일 시트를 생성합니다.
  8. 파일을 열고 다음 텍스트를 입력하여 소스 파일 경로의 루트를 확인합니다.
    #base=[root]
    소스 파일 [root] 이 들어 있는 폴더의 경로로 TXT 파일을 기준으로 대체합니다. 예를 들어 소스 파일이 TXT 파일과 동일한 폴더에 있는 경우 다음 텍스트를 사용합니다.
    #base=.
    다음 코드는 루트를 노드 아래에 mobile이라는 폴더로 cq:ClientLibraryFolder 설정합니다.
    #base=mobile
  9. 아래 줄에 루트 #base=[root] 를 기준으로 소스 파일의 경로를 입력합니다. 각 파일 이름을 별도의 줄에 배치합니다.
  10. 모두 저장을 클릭합니다 .

종속성 연결

클라이언트 라이브러리 폴더의 코드가 다른 라이브러리를 참조하면 다른 라이브러리를 종속성으로 식별합니다. JSP에서 클라이언트 라이브러리 폴더를 참조하는 ui:includeClientLib 태그로 인해 HTML 코드가 생성된 라이브러리 파일에 대한 링크 및 종속성을 포함하도록 됩니다.
종속성은 다른 것이어야 합니다 cq:ClientLibraryFolder . 종속성을 식별하려면 다음 속성을 사용하여 cq:ClientLibraryFolder 노드에 속성을 추가하십시오.
  • 이름: 종속성
  • 유형: 문자열 []
  • 값: 현재 라이브러리 폴더가 종속된 cq:ClientLibraryFolder 노드의 categories 속성 값.
예를 들어, / etc/clientlibs/myclientlibs/publicmain 는 라이브러리에 종속되어 cq.jquery 있습니다. 기본 클라이언트 라이브러리를 참조하는 JSP는 다음 코드를 포함하는 HTML을 생성합니다.
<script src="/etc/clientlibs/foundation/cq.jquery.js" type="text/javascript">
<script src="/etc/clientlibs/mylibs/publicmain.js" type="text/javascript">

다른 라이브러리의 코드 포함

클라이언트 라이브러리의 코드를 다른 클라이언트 라이브러리에 포함할 수 있습니다. 런타임 시 임베드 라이브러리의 생성된 JS 및 CSS 파일에는 임베드 라이브러리의 코드가 포함되어 있습니다.
포함 코드는 저장소의 보안 영역에 저장된 라이브러리에 대한 액세스를 제공하는 데 유용합니다.

앱별 클라이언트 라이브러리 폴더

응용 프로그램 관련 파일을 아래 응용 프로그램 폴더에 보관하는 것이 좋습니다 /app . 또한 웹 사이트 방문자가 /app 폴더에 액세스할 수 없도록 하는 것이 좋습니다. 두 가지 모범 사례를 모두 충족하려면 아래에 있는 클라이언트 라이브러리를 포함하는 /etc 폴더 아래에 클라이언트 라이브러리 폴더를 만드십시오 /app .
categories 속성을 사용하여 포함할 클라이언트 라이브러리 폴더를 식별합니다. 라이브러리를 포함하려면 다음 속성 속성을 사용하여 포함 cq:ClientLibraryFolder 노드에 속성을 추가합니다.
  • 이름: 포함
  • 유형: 문자열 []
  • 값: 포함할 노드의 categories 속성 값 cq:ClientLibraryFolder 입니다.

포함 기능을 사용하여 요청 최소화

경우에 따라 게시 인스턴스별로 일반적인 페이지에 대해 생성된 최종 HTML에 비교적 많은 수의 <script> 요소가 포함되어 있습니다. 특히 사이트에서 분석 또는 타깃팅을 위해 클라이언트 컨텍스트 정보를 사용하고 있는 경우입니다. 예를 들어, 최적화되지 않은 프로젝트에서는 페이지의 HTML에 다음과 같은 일련의 <script> 요소를 찾을 수 있습니다.
<script type="text/javascript" src="/etc/clientlibs/granite/jquery.js"></script>
<script type="text/javascript" src="/etc/clientlibs/granite/utils.js"></script>
<script type="text/javascript" src="/etc/clientlibs/granite/jquery/granite.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/jquery.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/shared.js"></script>
<script type="text/javascript" src="/etc/clientlibs/granite/underscore.js"></script>
<script type="text/javascript" src="/etc/clientlibs/foundation/personalization/kernel.js"></script>

이러한 경우 필요한 모든 클라이언트 라이브러리 코드를 하나의 파일로 결합하여 페이지 로드 시 요청이 오고 나가는 횟수를 줄이는 것이 유용할 수 있습니다. 이렇게 하려면 노드의 embed 속성 embed 을 사용하여 필요한 라이브러리를 앱별 클라이언트 라이브러리에 포함할 수 cq:ClientLibraryFolder 있습니다.
다음 클라이언트 라이브러리 카테고리는 AEM에 포함됩니다. 특정 사이트의 기능에 필요한 것만 포함해야 합니다. 그러나 여기에 나와 있는 주문을 유지해야 합니다 .
  1. browsermap.standard
  2. browsermap
  3. jquery-ui
  4. cq.jquery.ui
  5. personalization
  6. personalization.core
  7. personalization.core.kernel
  8. personalization.clientcontext.kernel
  9. personalization.stores.kernel
  10. personalization.kernel
  11. personalization.clientcontext
  12. personalization.stores
  13. cq.collab.comments
  14. cq.collab.feedlink
  15. cq.collab.ratings
  16. cq.collab.toggle
  17. cq.collab.forum
  18. cq.cleditor

CSS 파일의 경로

CSS 파일을 포함할 때 생성된 CSS 코드는 포함 라이브러리에 상대적인 리소스에 대한 경로를 사용합니다. 예를 들어 공개적으로 액세스할 수 있는 라이브러리에는 클라이언트 라이브러리 /etc/client/libraries/myclientlibs/publicmain /apps/myapp/clientlib 포함됩니다.
파일에 main.css 다음 스타일이 포함되어 있습니다.
body {
  padding: 0;
  margin: 0;
  background: url(images/bg-full.jpg) no-repeat center top;
  width: 100%;
}

노드가 생성하는 CSS 파일은 원래 이미지의 URL을 사용하여 다음 스타일을 publicmain 포함합니다.
body {
  padding: 0;
  margin: 0;
  background: url(../../../apps/myapp/clientlib/styles/images/bg-full.jpg) no-repeat center top;
  width: 100%;
}

특정 모바일 그룹용 라이브러리 사용

클라이언트 라이브러리 폴더의 channels 속성을 사용하여 라이브러리를 사용하는 모바일 그룹을 식별합니다. 이 channels 속성은 동일한 범주의 라이브러리가 다양한 장치 기능에 맞게 디자인된 경우에 유용합니다.
클라이언트 라이브러리 폴더를 장치 그룹과 연결하려면 다음 속성을 사용하여 cq:ClientLibraryFolder 노드에 속성을 추가하십시오.
  • 이름: 채널
  • 유형: 문자열 []
  • 값: 모바일 그룹의 이름입니다. 그룹에서 라이브러리 폴더를 제외하려면 이름에 느낌표("!")를 붙입니다.
예를 들어 다음 표에는 범주의 각 클라이언트 라이브러리 폴더에 대한 channels 속성 값이 cq.widgets 나열됩니다.
클라이언트 라이브러리 폴더
채널 속성 값
/libs/cq/analytics/widgets
!touch
/libs/cq/analytics/widgets/themes/default
!touch
/libs/cq/cloudserviceconfigs/widgets
!touch
/libs/cq/searchpromote/widgets
!touch
/libs/cq/searchpromote/widgets/themes/default
[ 값 없음​ ]
/libs/cq/touch/widgets
touch
/libs/cq/touch/widgets/themes/default
touch
/libs/cq/ui/widgets
!touch
/libs/cq/ui/widgets/themes/default
!touch

프리프로세서 사용

AEM에서는 플러그형 프리프로세서를 지원하고 AEM의 기본 프리프로세서로 설정된 JavaScript용 YUI Compressor GCC(Google Closure Compiler) 지원을 제공합니다.
플러그형 프리프로세서를 통해 다음을 비롯한 유연한 사용 가능
  • 스크립트 소스를 처리할 수 있는 스크립트 프로세서 정의
  • 프로세서는 옵션을 사용하여 구성할 수 있습니다.
  • 프로세서는 소정에 사용할 수 있지만, 축소 가능한 경우도 사용할 수 있습니다
  • clientlib은 사용할 프로세서를 정의할 수 있습니다.
기본적으로 AEM은 YUI 압축기를 사용합니다. 알려진 문제 목록은 YUI Compressor GitHub 설명서를 참조하십시오. 특정 클라이언트용 GCC 압축기로 전환하면 YUI를 사용할 때 발생하는 몇 가지 문제를 해결할 수 있습니다.
클라이언트 라이브러리에 축소 라이브러리를 배치하지 마십시오. 대신 원시 라이브러리를 제공하고, 인증이 필요한 경우 프리프로세서의 옵션을 사용하십시오.

사용량

클라이언트 라이브러리 또는 시스템 전체에 대해 프리프로세서 구성을 구성할 수 있습니다.
  • Add the multivalue properties cssProcessor and jsProcessor on the clientlibrary node
  • 또는 HTML Library Manager OSGi 구성을 통해 시스템 기본 구성 정의
clientlib 노드의 프리프로세서 구성이 OSGI 구성에 우선합니다.

형식 및 예

형식

config:= mode ":" processorName options*;
mode:= "default" | "min";
processorName := "none" | <name>;
options := ";" option;
option := name "=" value;

CSS용 YUI 압축기 및 JS용 GCC

cssProcessor: ["default:none", "min:yui"]
jsProcessor: ["default:none", "min:gcc;compilationLevel=advanced"]

Typescript를 Preprocess로 변환한 다음 GCC에서 Minify 및 Obfuskate로 변환

jsProcessor: [
   "default:typescript",
   "min:typescript", 
   "min:gcc;obfuscate=true"
]

추가 GCC 옵션

failOnWarning (defaults to "false")
languageIn (defaults to "ECMASCRIPT5")
languageOut (defaults to "ECMASCRIPT5")
compilationLevel (defaults to "simple") (can be "whitespace", "simple", "advanced")

GCC 옵션에 대한 자세한 내용은 GCC 설명서를 참조하십시오 .

시스템 기본 미니표시자 설정

AEM에서 UI가 기본 미니피자로 설정됩니다. GCC로 변경하려면 다음 단계를 따르십시오.
  1. http://localhost:4502/system/console/configMgr의 Apache Felix Config Manager로 이동합니다.
  2. Adobe Granite HTML Library Manager를 찾아 편집합니다 .
  3. 축소 옵션을 활성화합니다(아직 활성화되지 않은 경우).
  4. JS 프로세서 기본 구성을 min:gcc 설정합니다.
    세미콜론(예:)으로 구분하면 옵션을 전달할 수 있습니다. min:gcc;obfuscate=true .
  5. Click Save to save the changes.

디버깅 도구

AEM에서는 클라이언트 라이브러리 폴더를 디버깅하고 테스트하는 몇 가지 도구를 제공합니다.

포함된 파일 참조

포함된 코드의 원본을 추적하거나 포함된 클라이언트 라이브러리가 예상 결과를 생성하는지 확인하기 위해 런타임 시 포함 중인 파일의 이름을 볼 수 있습니다. 파일 이름을 보려면 웹 페이지의 URL에 매개 debugClientLibs=true 변수를 추가합니다. 생성된 라이브러리에는 포함된 코드 대신 @import 문이 포함되어 있습니다.
이전 다른 라이브러리의 코드 포함 섹션의 예에서 /etc/client/libraries/myclientlibs/publicmain 클라이언트 라이브러리 폴더에 /apps/myapp/clientlib 클라이언트 라이브러리 폴더가 포함됩니다. 웹 페이지에 매개 변수를 추가하면 웹 페이지의 소스 코드에 다음 링크가 만들어집니다.
<link rel="stylesheet" href="/etc/clientlibs/mycientlibs/publicmain.css">

파일을 열면 다음 코드가 publicmain.css 표시됩니다.
@import url("/apps/myapp/clientlib/styles/main.css");

  1. 웹 브라우저의 주소 상자에서 HTML의 URL에 다음 텍스트를 추가합니다.
    ?debugClientLibs=true
  2. 페이지가 로드되면 페이지 소스를 봅니다.
  3. 파일을 열고 소스 코드를 보기 위해 링크 요소의 href로 제공되는 링크를 클릭합니다.

클라이언트 라이브러리 검색

구성 요소는 시스템의 모든 클라이언트 라이브러리 폴더에 대한 정보 페이지를 생성합니다 /libs/cq/granite/components/dumplibs/dumplibs . 노드에는 /libs/granite/ui/content/dumplibs 리소스 유형으로 구성 요소가 있습니다. 페이지를 열려면 다음 URL을 사용합니다(필요에 따라 호스트 및 포트 변경).
https://<host>:<port>/libs/granite/ui/content/dumplibs.test.html
이 정보에는 라이브러리 경로 및 유형(CSS 또는 JS)과 범주 및 종속성 등의 라이브러리 속성 값이 포함됩니다. 페이지의 다음 표는 각 카테고리와 채널의 라이브러리를 보여줍니다.

생성된 출력 참조

구성 요소 dumplibs 에는 태그에 대해 생성된 소스 코드를 표시하는 테스트 선택기가 ui:includeClientLib 포함되어 있습니다. 이 페이지에는 js, css 및 테마 속성의 다양한 조합을 위한 코드가 포함되어 있습니다.
  1. 다음 방법 중 하나를 사용하여 # 페이지를 엽니다.
    • 페이지에서 출력 테스트 dumplibs.html 텍스트를 보려면 여기를 클릭하십시오 .
    • 웹 브라우저에서 다음 URL을 엽니다(필요에 따라 다른 호스트 및 포트 사용).
      • http://<host>:<port>/libs/granite/ui/content/dumplibs.html
    기본 페이지에는 categories 속성에 대한 값이 없는 태그에 대한 출력이 표시됩니다.
  2. 카테고리에 대한 출력을 보려면 클라이언트 라이브러리 속성 값을 입력하고 쿼리 제출 categories 을 클릭합니다 .

개발 및 제작을 위한 라이브러리 처리 구성

HTML 라이브러리 관리자 서비스는 태그를 처리하고 런타임에 라이브러리를 생성합니다. cq:ClientLibraryFolder 환경, 개발 또는 제작의 유형에 따라 서비스를 구성하는 방법이 결정됩니다.
  • 보안 강화: 디버깅 사용 안 함
  • 성능 향상: 공백을 제거하고 라이브러리를 압축합니다.
  • 가독성 향상: 공백을 포함하고 압축하지 않습니다.
서비스 구성에 대한 자세한 내용은 AEM HTML 라이브러리 관리자를 참조하십시오 .