在组件存在时，确保组件的客户端lib文件仅在页面上加载的最佳方法是什么？

Question

我是AEM的新手。目前，我们网站上的每个页面都有一个模板。所有组件都具有类别＆＃34; project_name.components＆＃34;我在一个头文件中调用客户端库：

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

但是，我的每个页面上都有一个breadcrumbs组件，但是，正如预期的那样，它的客户端libs文件无论如何都会出现，并导致现有默认面包屑样式的一些问题/脚本。

我给新的breadcrumb组件一个测试类别名称＆＃34; project_name.breadcrumbs＆＃34;。有没有办法在同一个头文件中的某种类型的if / else语句中使用此类别名称，如果将痕迹导入页面，则只会调用面包屑客户端lib文件？

Answer 1

一些想法：

• 最简单的方法是将客户端库包含在使用它的组件中，而不是将其包含在其他位置。这样做的缺点是，您可能希望在页面的HEAD部分中尽早加载的CSS不会出现在BODY中的某个位置。
• 如果您的CSS样式影响了它不应该的东西，那么CSS样式需要有足够的选择器，这样它就不会破坏它不适用的东西。也许您可以在面包屑中添加一个类，并使所有样式仅应用于具有该类的标记下的内容。如果您以这种方式更改了CSS，那么当他们不使用面包屑时，它不会对页面产生负面影响（尽管如果不是这样的话，它可能会使页面占用空间膨胀。加载并缓存浏览器以备将来使用。）
• 否则，您可以添加在页面级别运行的逻辑，该逻辑将检查节点并查看包含哪些组件，然后添加条件逻辑以仅在页面使用组件时添加客户端库。但那是更多的后端工作。所以你可以按照你的建议添加if / else语句，但是由你来编写它背后的代码 - 根据我的知识，没有任何内置条件可以有条件地进行检查。