구성 요소가있을 때 구성 요소의 클라이언트 lib 파일이 페이지에만로드되도록하는 가장 좋은 방법은 무엇입니까?

Question

저는 AEM을 처음 사용합니다. 현재 우리 사이트에는 각 페이지마다 하나의 템플릿이 있습니다. 예상대로, 그러나

<sly data-sly-call="${clientLib.css @ categories='project_name.components'}" /> 
<sly data-sly-call="${clientLib.js @ categories='project_name.components'}" /> 

, 나는 모든 페이지에없는 빵 부스러기 구성 요소를 가지고 있지만, 모든 구성 요소는 카테고리 "project_name.components"가 내가 가진 헤더 파일의 클라이언트 libs와 전화하고 클라이언트 libs 파일은 관계없이 나타나고 기존 기본 breadcrumbs의 스타일/스크립트에 몇 가지 문제가 발생합니다.

새로운 breadcrumb 구성 요소에 "project_name.breadcrumbs"라는 테스트 카테고리 이름을 지정했습니다. 탐색 경로가 페이지로 드래그 된 경우 이동 경로 클라이언트 라이브러리 파일 만 호출하는 동일한 헤더 파일의 if/else 문에서이 범주 이름을 사용하는 방법이 있습니까?

Answer 1

몇 가지 생각 :

• 가장 쉬운 방법은 다른 곳을 포함한보다는 그것을 사용하는 구성 요소의 일부로 클라이언트 라이브러리를 포함하는 것입니다. 단점은 페이지의 HEAD 섹션에서 초기에로드하려는 CSS가 BODY 어딘가에 나타날 때까지 존재하지 않는다는 것입니다.
• CSS 스타일링이 영향을 줄 수있는 사항에 영향을 미치지 않으면 CSS 스타일링에 적용 할 수없는 것들을 손상시키지 않도록 충분한 선택기가 있어야합니다. 아마도 빵 부스러기에 클래스를 추가하고 모든 스타일을 클래스가있는 태그 아래에만 적용하도록 만들 수 있습니다. 이 방법으로 CSS를 변경하면 페이지가 사이트 이동 경로를 사용하지 않을 때 페이지에 부정적인 영향을 미치지 않습니다 (페이지로드 영역이 부 풀릴 수있는 단점이있을 수 있지만 미래에 사용됨).
• 그렇지 않은 경우 페이지 수준에서 실행되는 논리를 추가하여 노드를 검사하고 포함 된 구성 요소를 확인한 다음 조건부 논리를 추가하여 페이지에서 구성 요소를 사용할 때만 클라이언트 라이브러리를 추가 할 수 있습니다. 그러나 그것은 더 많은 백엔드 작업입니다. 따라서 if/else 문을 제안대로 추가 할 수는 있지만 코드 뒤에 코드를 작성해야합니다. 조건부로 내 지식을 검사 할 내장 함수는 없습니다.