CQ5.5带有CSS脚本的组件 [英] CQ5.5 Components with CSS script

问题描述

因为我是新到CQ5.5

as i am new to CQ5.5

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

I was wondering if it is possible to add a css script within a CQ5.5 componenet.

脚本如下

< 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网站，错误

As when i tried to do this and run my html site through the wc3 validator, i have to following error

文档类型不允许元素style style
type =text / css>上面命名的元素是在不允许
的上下文中找到的。这可能意味着你不正确地嵌套
元素 - 例如body部分中的style元素，而不是head中的
- 或两个重叠的元素）。
此错误的一个常见原因是在HTML
文档中使用XHTML语法。由于HTML的隐式封闭元素的规则，这个
错误可以创建级联效果。例如，在
HTML文档的head部分中使用XHTML的
自我关闭标签用于meta和link可能会导致解析器推断head
部分和正文部分的开头

document type does not allow element "style" here < style type="text/css" > The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed). One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section

这意味着它要求它包含在或者不建议在组件的代码中写css？

Does it means it requires it to enclosed within the tag of an or it is not advisable to write css within the codes of an component?

其他方法吗？

推荐答案

> STYLE 标记，根据 w3c建议，允许作者将样式表规则放在文档的开头。 HTML允许文档HEAD部分中的任何数量的STYLE元素，尽管它没有明确说明您不应该将它添加到文档的其他位置。

The STYLE tag, according to the 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, though it is not explicitly stated that you shouldn't be adding it elsewhere in the document.

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

Going by the standards, validators would fail this test case as HTML DTD expects it to be within the HEAD section. And that is exactly the reason why you get the error mentioned in your question. But then, you would still get the expected result because almost all the modern browsers support it anyway.

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

If you are to follow the best practices, it is advisable to avoid specifying the styles within the component's JSP because

1. 如果一个组件被多次添加到页面，同样的css将被添加到多个位置这一页。


2. 它是根据DTD的无效标记。


3. 这将变得难以维护和管理，任何更改
   需要开发人员以查看多个位置。


4. 这很丑陋。

1. If a component is added to the page multiple times, the same css would be added in multiple locations in the page.
2. It is invalid markup as per the DTD.
3. It would become difficult to maintain and manage, and any change requires the developer to look at multiple locations.
4. It is ugly.

解决这个问题的一种方法是使用提供客户端HTML库（clientlibs）功能通过CQ5（AEM）。这允许您在相应的客户端库文件夹中组织特定于组件的样式和脚本，并使用 cq：includeClientLib 标记，您可以将它们包括在JSP中。

One way to work around this is using the Client-side HTML library(clientlibs) feature provided by CQ5(AEM). This allows you to organize your component specific styles and scripts within the corresponding clientlibrary folders and using the cq:includeClientLib tag you can include them in your JSP.

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

But this would include a <link> or <script> at the corresponding location where the cq:includeClientLib is used, which again is an invalid markup according to the w3c validator. Also, adding the component multiple times in the same page, leads to inclusion of multiple link tags in the document.

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

To overcome this, you could use the embed feature available in clientlibs to embed all the component specific client libraries of your project into another clientlibrary within your design folder present in /etc/designs. Then you can include the embedded clientlib in your page's head section along with your projects global clientlibs. This makes sure that all your component specific styles are added only once, as well as access is restricted to application specific folders to the end users as your files are delivered from /etc and not /apps.

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

For more on creating and using Client-Side HTML Libraries, refer this doc.

这篇关于CQ5.5带有CSS脚本的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！