Was ist der beste Weg, um sicherzustellen, dass die Client-Lib-Dateien einer Komponente nur auf der Seite geladen werden, wenn die Komponente vorhanden ist?

Question

Ich bin neu in AEM. Derzeit haben wir eine Vorlage für jede Seite auf unserer Website. Alle Komponenten haben die Kategorie „project_name.components“ und ich die Client-Libs in einer Header-Datei anzurufenden mit:

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

Ich habe jedoch eine Paniermehl-Komponente, die nicht auf jeder Seite, aber, wie erwartet, Die Client-libs-Dateien dafür werden trotzdem angezeigt und verursachen einige Probleme mit den vorhandenen Standard-Breadcrumbs-Styles/Scripts.

Ich habe der neuen Breadcrumb-Komponente einen Testkategorie-Namen von "project_name.breadcrumbs" gegeben. Gibt es eine Möglichkeit, diesen Kategorienamen in einer if/else-Anweisung in derselben Header-Datei zu verwenden, die nur die breadcrumb-Client-lib-Dateien aufruft, wenn der Breadcrumb auf die Seite gezogen wurde?

Answer 1

Ein paar Gedanken:

• Der einfachste Weg, um die Client-Bibliothek als Teil der Komponente, die es enthalten ist eher verwendet als es irgendwo anders darunter. Der Nachteil davon ist, dass das CSS, das Sie vielleicht früh im HEAD-Abschnitt einer Seite laden möchten, erst irgendwo im BODY vorhanden sein wird.
• Wenn Ihr CSS-Styling Auswirkungen auf Dinge hat, die es nicht tun sollte, dann muss das CSS-Styling über ausreichende Auswahlmöglichkeiten verfügen, damit es Dinge nicht bricht, auf die es nicht zutreffen sollte. Vielleicht können Sie den Breadcrumbs eine Klasse hinzufügen und dafür sorgen, dass das gesamte Styling nur auf Zeug unter einem Tag angewendet wird, das die Klasse enthält. Wenn Sie das CSS auf diese Weise ändern, wirkt sich dies nicht negativ auf Seiten aus, die den Breadcrumb nicht verwenden (obwohl dies den Nachteil haben könnte, dass Ihr Seiten-Footprint aufgebläht wird, wenn er nicht geladen und im Browser zwischengespeichert wird) in der Zukunft verwendet).
• Andernfalls können Sie eine Logik hinzufügen, die auf Seitenebene ausgeführt wird, die den Knoten untersuchen und sehen, welche Komponenten enthalten sind, und dann bedingte Logik hinzufügen, um nur die Clientbibliothek hinzuzufügen, wenn die Seite die Komponente verwendet. Aber das ist mehr Back-End-Arbeit. Sie können also die if/else-Anweisung hinzufügen, wie Sie es vorgeschlagen haben, aber es liegt an Ihnen, den Code dahinter zu schreiben - es gibt nichts eingebautes, das diese Überprüfung nach meinem Wissen bedingt durchführen wird.