如何处理具有相同 html 结构和不同 css 的 cq 组件？
How to handle cq component with same html structure and different css?
我有 2 个 jsps，用于 2 个具有相同 html 结构但 css 不同的 cq 组件。
- 在这种情况下重构的最佳实践是什么？
一种情况是只有一个组件，并根据作者在对话框中提供的一些输入（组件类型 1、组件类型 2）设置 css 类，但这变得混乱，因为我需要进行 if 检查并为 css 类 设置不同的值。如果我添加具有相同 html 结构和不同 css.
的第三个组件，它会变得更加复杂
我建议使用以下方法之一：
创建具有 html 结构的基础组件，并为每个设计创建具有 sling:resourceSuperType 基础组件的组件。在子组件中，您可以使用特定文件覆盖 css 文件。
基本组件 应该由（至少）2 jsp 个文件组成：
- 包含一些 class（在不同设计中独一无二）的容器，其中包含实际组件内容。这个 class 然后应该在 css 文件中的选择器中使用。喜欢
.container-design-1 .title {}。这个容器也可以在子组件中被覆盖。
- jsp有内容
您还可以使用组件对话，但会使用可用的设计动态填充下拉菜单。例如，您可以有一些 servlet+service，它查看存储库并为该组件收集可用的 clientlib 类别。在渲染过程中，您将包括选定的 clientlib 类别，为您的容器设置唯一的 class 并在 css 选择器中使用它（与以前的方法一样）。
此外，在这两种情况下，html 和 id/class 元素的名称应该相同，只有样式实现不同。
我有 2 个 jsps，用于 2 个具有相同 html 结构但 css 不同的 cq 组件。
- 在这种情况下重构的最佳实践是什么？
一种情况是只有一个组件，并根据作者在对话框中提供的一些输入（组件类型 1、组件类型 2）设置 css 类，但这变得混乱，因为我需要进行 if 检查并为 css 类 设置不同的值。如果我添加具有相同 html 结构和不同 css.
的第三个组件，它会变得更加复杂我建议使用以下方法之一：
创建具有 html 结构的基础组件，并为每个设计创建具有
sling:resourceSuperType基础组件的组件。在子组件中，您可以使用特定文件覆盖 css 文件。 基本组件 应该由（至少）2 jsp 个文件组成：- 包含一些 class（在不同设计中独一无二）的容器，其中包含实际组件内容。这个 class 然后应该在 css 文件中的选择器中使用。喜欢
.container-design-1 .title {}。这个容器也可以在子组件中被覆盖。 - jsp有内容
- 包含一些 class（在不同设计中独一无二）的容器，其中包含实际组件内容。这个 class 然后应该在 css 文件中的选择器中使用。喜欢
您还可以使用组件对话，但会使用可用的设计动态填充下拉菜单。例如，您可以有一些 servlet+service，它查看存储库并为该组件收集可用的 clientlib 类别。在渲染过程中，您将包括选定的 clientlib 类别，为您的容器设置唯一的 class 并在 css 选择器中使用它（与以前的方法一样）。
此外，在这两种情况下，html 和 id/class 元素的名称应该相同，只有样式实现不同。