如何强制 CQ5.5 忽略 CSS data-uri-schemes？答案

【问题标题】：How can I force CQ5.5 to ignore CSS data-uri-schemes?如何强制 CQ5.5 忽略 CSS data-uri-schemes？
【发布时间】：2012-12-18 13:02:23
【问题描述】：

我正在尝试使用 data-uri-scheme 将自定义字体包含到 css 中。 CQ5（我使用的是5.5版）正在将clientlib目录的路径添加到带有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 中的错误还是我可以添加/做一些事情来防止添加“桌面/css”？

结果是，我得到 404 HTTP 状态，因为字体“未找到”。

[更新]：

css 文件包含在 html <head> 部分的 base.jsp 中。

<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

【问题讨论】：

您是否介意添加更多详细信息，说明您是如何在页面中包含此 css 的？例如，这是在 clientlib 包含的 css 文件中吗？如果是这样，该css文件的相关内容是什么以及将clientlibs包含到您的HTML中的代码的sn-p是什么（例如currentDesign.writeCssIncludes（pageContext）；）这是您的cq：Page HTML JSP中的内联吗？您是否在您的页面或组件 JSP 之一中输出上述内容？我问是为了复制问题，看看它是否可能是链接检查器或 HtmlLibraryManager 为您重写 URL 的问题。
@JasonDay 我已经更新了我的问题来回答你的问题。让我知道我是否还有其他遗漏。谢谢。

标签： css base64 aem data-uri

【解决方案1】：

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

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

【讨论】：

您好 Jason，感谢您的详细分析。我以为这将是一个错误。如果您不介意我问您是在 Adobe 工作，还是使用 Day 为客户工作过？
完全没有，我在一家公司工作，我们的一些网站使用 CQ5。
我已经为这个答案授予了赏金，因为我认为情况就是这样，我下一步要开一张日托票。

【解决方案2】：

这是一个错误，将在 5.6 中修复。直接包含单个 css 文件（如前所述）避免了 clientlib 重写，否则我不知道 clientlib 中的解决方法。

原因是客户端库正在重写相对路径，因为基础从单个 css 文件更改为串联的 clientlib css。 "data:" uri 在这里根本没有被正确考虑。

【讨论】：

我会选择这个答案，因为它也是Justin Edelson tweeted。谢谢。

【解决方案3】：

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

(1) 将@font-face 代码放在CQ5 为您组装的外部.css 文件中。除了使用<cq:includeClientLib> 标签将其包含在您的 HTML 中，您可能会发现您必须显式编码标签，例如：

<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>

【讨论】：

嗨大卫，感谢您的建议。我知道这两种解决方案。我可能会选择第一个或使用内联 css (

【解决方案4】：

没有检查导致错误重写的原因，我认为它是Day CQ Link Checker Service。

您可能需要添加 Special Link Prefix 或 Special Link Pattern 以防止此模式被识别为链接并被重写。

因此，只需在 /apps/..（libs 下相应配置的覆盖）下添加您的自定义链接检查器配置，并进行上述更改，就可以了。

【讨论】：

不，它与链接检查器无关。 Clientlibs 正在重写相对路径，因为基础从单个 css 文件更改为串联的 clientlib css。