CQ5.5带CSS脚本的组件

时间:2014-04-04 09:07:35

标签: css jsp adobe components cq5

因为我是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?

还有其他方法吗?

2 个答案:

答案 0 :(得分:4)

STYLE 标记,根据w3c recommendationallows 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中指定样式,因为

  1. 如果多次向页面添加组件,则会在页面的多个位置添加相同的css。
  2. 根据DTD,它是无效标记。
  3. 维护和管理以及任何变化都会变得困难 要求开发人员查看多个位置。
  4. 很难看。
  5. 解决此问题的一种方法是使用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

答案 1 :(得分:0)

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

<!-- 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; }
}
希望它可以提供帮助。