0

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

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

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

我已经给新的面包屑组件一个测试类别名称“project_name.breadcrumbs”。有没有办法在同一头文件中的某种类型的 if/else 语句中使用此类别名称，如果面包屑已被拖到页面上，则只会调用面包屑客户端 lib 文件？

4

1 回答 1

1

一些想法：

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