Clientlibs 추가

ClientLibraryFolder(clientlibs) 추가

사이트의 페이지를 렌더링하는 데 사용되는 JS와 CSS를 포함할 clientlibs라는 ClientLibraryFolder를 만듭니다.

이 클라이언트 라이브러리에 지정된 categories속성 값은 컨텐츠 페이지에서 이 clientlib을 직접 포함하거나 다른 clientlibs에 포함하는 데 사용되는 식별자입니다.

  1. CRXDE Lite​을 사용하여 /etc/designs 확장

  2. an-scf-sandbox을 마우스 오른쪽 단추로 클릭하고 Create Node 선택

    • 이름: clientlibs
    • 유형: cq:ClientLibraryFolder
  3. 확인​을 클릭합니다

chlimage_1-220

clientlibs 노드의 속성 탭에서 categories 속성을 입력합니다.

  • 이름:카테고리
  • 유형:String
  • 값:apps.an-scf-sandbox
  • 추가​를 클릭합니다
  • 모두 저장​을 클릭합니다.

참고:'apps'로 카테고리 값 앞에 표시 는 '소유 응용 프로그램'이 /libs가 아닌 /apps 폴더에 있는 것으로 식별하기 위한 규칙입니다. 중요:자리 표시자 js.txtcss.txt 파일을 추가합니다. 공식적으로 cq:ClientLibraryFolder가 없는 것은 아닙니다.

  1. /etc/designs/an-scf-sandbox/clientlibs​을(를) 마우스 오른쪽 단추로 클릭합니다.

  2. 파일 만들기…를 선택합니다.

  3. 이름​을 입력합니다.css.txt

  4. 파일 만들기…를 선택합니다.

  5. 이름​을 입력합니다.js.txt

  6. 모두 저장​을 클릭합니다.

chlimage_1-221

css.txt 및 js.txt의 첫 행은 다음 파일 목록을 찾을 기본 위치를 식별합니다.

css.txt의 컨텐츠를 다음과 같이 설정합니다.

#base=.
 style.css

그런 다음 style.css라는 clientlibs 아래에 파일을 만들고 내용을 다음으로 설정합니다.

body {

background-color: #b0c4de;

}

SCF Clientlibs 포함

clientlibs 노드의 속성 탭에서 다중 값 문자열 속성 embed​을 입력합니다. 이렇게 하면 SCF 구성 요소🔗에 필요한 클라이언트측 라이브러리(clientlibs)가 포함됩니다. 이 자습서에서는 커뮤니티 구성 요소에 필요한 많은 클라이언트를 추가합니다.

모든 페이지에 대해 다운로드한 클라이언트의 크기/속도 및 편의에 대한 고려 사항이 있기 때문에 프로덕션 사이트에 사용하기 원하는 접근 방식이 아니거나 이에 해당될 수 있습니다.

한 페이지에 하나의 기능을 사용하는 경우에만 해당 기능의 complete clientlib을 페이지에 직접 포함할 수 있습니다. 예를 들어, <% ui:includeClientLib categories=cq.social.hbs.forum" %>

이 경우 모든 SCF를 포함하므로 author clientlibs인 보다 기본적인 SCF clientlibs를 선호합니다.

  • 이름: embed

  • 유형: String

  • 클릭 Multi

  • 값: cq.social.scf

    <enter> 대화 상자가 표시됩니다.

    각 항목​[뒤에]+를 클릭하여 다음 clientlib 범주를 추가합니다.

    • cq.ckeditor
    • cq.social.author.hbs.comments
    • cq.social.author.hbs.forum
    • cq.social.author.hbs.rating
    • cq.social.author.hbs.reviews
    • cq.social.author.hbs.voting
    • 확인​을 클릭합니다
  • 모두 저장​을 클릭합니다.

chlimage_1-222

이제 /etc/designs/an-scf-sandbox/clientlibs이(가) 저장소에 표시되는 방식입니다.

chlimage_1-223

PlayPage 템플릿에 클라이언트 포함

페이지에 apps.an-scf-sandbox ClientLibraryFolder 범주를 포함하지 않으면 SCF 구성 요소가 기능하거나 스타일을 지정할 수 없으며 필요한 Javascript 및 스타일이므로 사용할 수 없습니다.

예를 들어 clientlibs를 포함하지 않는 SCF 주석 구성 요소는 스타일이 지정되지 않은 것으로 나타납니다.

chlimage_1-224

apps.an-scf-sandbox clientlibs가 포함되면, SCF 주석 구성 요소가 스타일이 지정된 것으로 나타납니다.

chlimage_1-225

include 문은 <html> 스크립트의 <head> 섹션에 속합니다. 기본 foundation head.jsp​에는 오버레이할 수 있는 스크립트가 포함되어 있습니다.headlibs.jsp.

headlibs.jsp를 복사하고 clientlibs를 포함합니다.

  1. CRXDE Lite​을 사용하여 /libs/foundation/components/page/headlibs.jsp 선택

  2. 마우스 오른쪽 단추를 클릭하고 복사​를 선택합니다(또는 도구 모음에서 복사를 선택합니다).

  3. 선택 /apps/an-scf-sandbox/components/playpage

  4. 마우스 오른쪽 단추를 클릭하고 붙여넣기(또는 도구 모음에서 붙여넣기)를 선택합니다.

  5. headlibs.jsp​을 두 번 클릭하여 엽니다.

  6. 파일 끝에 다음 줄을 추가합니다.

    <ui:includeClientLib categories="apps.an-scf-sandbox"/>

  7. 모두 저장​을 클릭합니다.

<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp?lang=ko" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp?lang=ko"/>
<% currentDesign.writeCssIncludes(pageContext); %>
<ui:includeClientLib categories="apps.an-scf-sandbox"/>

브라우저에서 웹 사이트를 로드하고 배경이 파랑색이 아닌지 확인합니다.

http://localhost:4502/content/an-scf-sandbox/en/play.html

chlimage_1-226

지금까지 작업 저장 중

이때, 최소 샌드박스는 존재하며, 재생하는 동안 경험이 손상되고 다시 시작하려는 경우, 서버를 끄고, crx-quickstart/ 폴더의 이름을 바꾸거나 삭제하고, 서버를 켜거나, 이 저장된 패키지를 업로드 및 설치할 수 있으며 이러한 가장 기본적인 단계를 반복하지 않아도 됩니다.

이 패키지는 샘플 페이지 만들기 튜토리얼에서 바로 들어가서 재생을 시작할 때까지 기다릴 수 없는 사용자를 위한 것입니다…

패키지를 만들려면:

  • CRXDE Lite​에서 패키지 아이콘을 클릭합니다.

  • 패키지 만들기​를 클릭합니다.

    • 패키지 이름: an-scf-sandbox-minimal-pkg
    • 버전: 0.1
    • 그룹:<기본값으로 유지>
    • 확인​을 클릭합니다
  • 편집​을 클릭합니다

    • 필터 탭 선택

      • 필터 추가​를 클릭합니다.
      • 루트 경로:/apps/an-scf-sandbox 찾아보기
      • 완료​를 클릭합니다.
      • 필터 추가​를 클릭합니다.
      • 루트 경로:/etc/designs/an-scf-sandbox 찾아보기
      • 완료​를 클릭합니다.
      • 필터 추가​를 클릭합니다.
      • 루트 경로:/content/an-scf-sandbox 찾아보기
      • 완료​를 클릭합니다.
    • 저장​을 클릭합니다

  • 빌드​를 클릭합니다.

이제 다운로드​를 선택하여 디스크에 저장하고 다른 곳에서 패키지​업로드 을 선택할 수 있을 뿐만 아니라, 샌드박스를 localhost 게시 인스턴스로 푸시하여 샌드박스의 영역을 확장하려면 자세히 > 복제​를 선택합니다.

이 페이지에서는

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now