如何强制CQ5.5忽略CSS数据URI方案？

Question

如何强制CQ5.5忽略CSS数据URI方案？

5

我将尝试使用data-uri-scheme将自定义字体包含到CSS中。 CQ5（我使用的是版本5.5）将客户端库目录的路径添加到包含data-uri-scheme字体数据的CSS文件所在位置。

因此，它不会忽略CSS属性：

@font-face {
  font-family: 'CustomFont';
  src: url(data:application/x-font-woff;...
  ...
}

CQ5实现以下功能：

@font-face {
  font-family: 'CustomFont';
  src: url(desktop/css/data:application/x-font-woff;...
  ...
}

这是CQ5.5的一个bug吗？还是我可以添加/做些什么来防止添加"desktop/css"？结果是，我得到404 HTTP状态，因为字体"未找到"。 [更新]: 在html <head>部分的base.jsp中包含了css文件。

<link rel="stylesheet" 
    href="/etc/designs/myproject/clientlib/desktop.css" type="text/css"/ >

base.jsp的位置：

/apps/myproject/pages/base/base.jsp

css.txt 的位置：

/etc/designs/myproject/clientlib/desktop/css.txt

- T. Junghans

能否详细说明一下您是如何在页面中包含此 CSS 的？例如，这是通过客户端库包含在 CSS 文件中的吗？如果是这样，请说明该 CSS 文件的相关内容以及将客户端库包括到 HTML 中的代码片段（例如currentDesign.writeCssIncludes(pageContext);）。这是在cq:Page HTML JSP中嵌入的吗？您是在页面或组件JSP中输出上述内容吗？我想了解并重现此问题，以确定这是否是链接检查器或HtmlLibraryManager为您重新编写URL的问题。 - Jason Day

@JasonDay 我已经更新了我的问题以回答你的问题。如果还有其他遗漏的地方，请让我知道。谢谢。 - T. Junghans

4个回答

2

这是一个错误，将在5.6版本中修复。直接包含个人CSS文件（如上所述）可以避免clientlib重写。否则，在clientlib中没有已知的解决方法。

原因是clientlib正在重写相对路径，因为基础从个人css文件更改为合并的clientlib css。 "data："uri在此处没有得到适当考虑。

- Alexander Klimetschek

我选择这个答案，因为它也是Justin Edelson发推文的内容。谢谢。 - T. Junghans

2

解决CQ5（通常很有帮助）链接重写的两种策略：

(1) 将@font-face代码放置在由CQ5为您组装的外部.css文件中。不要使用<cq:includeClientLib>标记将其包含在HTML中，您可能需要显式编码<link>标记，例如：

<link rel="stylesheet" href="<%= currentDesign.getPath() %>/clientlibs/themes/default.css" type="text/css" media="screen" />

(2) 使用document.write()调用注入@font-face代码：

<script type="text/javascript">
    document.write("@font-face { font-family: 'CustomFont'; src: url(data:application/x-font-woff;
    ...}");
</script>

- David Gorsline

嗨，David，感谢你的建议。我知道这两种解决方案。我可能会选择第一种或使用内联CSS（<style>）来包含字体。我正在处理一个高流量的网站，在那里每个HTTP请求都很重要，我希望找到让我使用数据URI方案的解决方案。 - T. Junghans

0

没有检查导致重写错误的原因，我猜测是由于Day CQ链接检查服务引起的。

你可能想要添加一个特殊链接前缀或特殊链接模式，以防止这种模式被识别为链接并被完全重写。

所以只需在/apps/..（libs下对应配置的覆盖）中添加自定义链接检查器配置，并进行上述更改，问题就会解决。

- Dominik Süß

不，这与链接检查器无关。客户端库正在重写相对路径，因为基础从单个CSS文件更改为连接的客户端库CSS。 - Alexander Klimetschek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Day · Accepted Answer

看起来像是一个错误。CSS通过一个方法传递，该方法专门查找在合并CSS文件以创建组合的CSS文件时在CSS文件中连接的url('{}') - CssFileBuilder#resolveUrl(String[], String[], String)。这个方法似乎没有考虑数据方案，而是仅在URL长度为0、以斜杠(/)开头或与模式"^[A-Za-z][A-Za-z0-9+\-.]://."（有效的外部链接）匹配时跳过修改URL。我的假设是，它这样做是为了修改相对的url('{}')值，但他们没有考虑数据方案。

我建议向Adobe开放一张Daycare工单，以更新此方法以支持data-uri-scheme。