Question

因为我是CQ5.5的新手

我想知道是否可以在CQ5.5组件中添加css脚本。

脚本如下

< style type="text/css">
.testScript
{
    margin: 0;
    padding: 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
< /style>

当我尝试这样做并通过wc3验证器运行我的html网站时，我必须遵循错误

文档类型不允许元素“style”在这里＆lt;样式 type =“text / css”＆gt;上面提到的元素是在上下文中找到的这个不允许。这可能意味着您嵌套错误元素 - 例如“body”部分中的“style”元素而不是在“head”里面 - 或两个重叠的元素（不允许）。导致此错误的一个常见原因是在HTML中使用XHTML语法文档。由于HTML的隐式封闭元素的规则，这个错误可以创建级联效果。例如，使用XHTML “自我关闭”标签为“元”和“链接”在“头”部分 HTML文档可能会导致解析器推断出“头部”的结束部分和“身体”部分的开头

这是否意味着它要求将其包含在一个标签内，或者不建议在一个组件的代码中编写css？

还有其他方法吗？

Answer 1

STYLE 标记，根据w3c recommendation，allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document,，但未明确声明您不应将其添加到文档的其他位置。

按照标准，验证者将失败此测试用例，因为HTML DTD期望它在HEAD部分内。这正是您收到问题中提到的错误的原因。但是，你仍然会得到预期的结果，因为几乎所有的现代浏览器都支持它。

如果要遵循最佳实践，建议避免在组件的JSP中指定样式，因为

如果多次向页面添加组件，则会在页面的多个位置添加相同的css。
根据DTD，它是无效标记。
维护和管理以及任何变化都会变得困难要求开发人员查看多个位置。
很难看。

解决此问题的一种方法是使用CQ5（AEM）提供的Client-side HTML library（clientlibs）功能。这允许您在相应的clientlibrary文件夹中组织特定于组件的样式和脚本，并使用cq:includeClientLib标记将它们包含在JSP中。

但是这会在使用cq：includeClientLib的相应位置包含<link>或<script>，根据w3c验证器，这也是一个无效的标记。此外，在同一页面中多次添加组件会导致在文档中包含多个链接标记。

要解决此问题，您可以使用clientlibs中提供的embed功能将项目的所有组件特定客户端库嵌入到/ etc / designs中存在的设计文件夹中的另一个客户端库中。然后，您可以在页面的head部分中包含嵌入式clientlib以及项目全局clientlib。这样可以确保所有组件特定样式只添加一次，并且由于文件是从/ etc而非/ apps传送的，因此访问仅限于最终用户的特定于应用程序的文件夹。

有关创建和使用客户端HTML库的更多信息，请参阅this doc。

Answer 2

组织此方法的最佳方法是在组件上使用特定的命名空间，例如：

<!-- jsp component -->
<div class="namespace">
    <!-- your stuff here -->
    <h1> <%= title%> </h1>
</div>

然后创建一个特定的设计作为自定义皮肤，然后使用该命名空间：

/* newDesign - css file */
.namespace h1{ color:red }

或少用：

/* newDesign - less file */
.namespace{
    h1{ color:red; }
}

希望它可以提供帮助。

CQ5.5带CSS脚本的组件

2 个答案: