如何处理具有相同html结构和不同css的cq组件？

Question

对于具有相同html结构但css不同的2 cq组件，我有2个jsps。

• 在这种情况下，重构的最佳做法是什么？

一种情况是拥有一个组件并根据作者在对话框（组件类型1，组件类型2）中提供的一些输入设置css类，但这会变得混乱，因为我需要执行if检查并为css类设置不同的值。如果我添加具有相同html结构和不同css的第3个组件，它会变得更加复杂。

Answer 1

我建议使用下一种方法之一：

• 使用html结构创建基本组件，并为每个设计创建具有sling:resourceSuperType基本组件的组件。在子组件中，您可以使用特定的组件覆盖css文件。 基本组件应由（至少）2个jsp文件组成：

  • 包含某些类（在不同设计中唯一）的容器，其中包含实际组件内容的包含。然后该类应该在css文件中的选择器中使用。像.container-design-1 .title {}一样。此容器也可以在子组件中覆盖。
  • jsp with content。

• 此外，您仍然可以使用组件对话，但可以动态填充可用设计的下拉菜单。例如，您可以使用一些servlet +服务查看存储库并收集此组件的可用clientlib类别。在渲染过程中，您将包含选定的clientlib类别，为容器设置唯一类并在css选择器中使用它（如以前的方法）。

同样在两种情况下，元素的html和id / class名称应该相同，并且只有样式实现是不同的。