2

我正在尝试像这里解释的那样预加载资产。

我已将这些包含在/apps/foundation/components/page/head.html：

  <sly data-sly-use.appConfig="${'../../../utils/AppConfig.js'}">
    <link rel="preload" href="${appConfig.assetsURL}/etc/designs/myapp/jquery/jquery-3.1.1.min.js">
    <link rel="preload" href="${appConfig.mainStyle}/mainstyle.css">
  </sly>

现在需要包含的最终文件是clientlibs.js为clientlibs.css每个页面放在一起的，根据页面具有不同的路径。例如，对于主页 (/content/homepage.html)，clientlibs.js 的路径是/etc/designs/myapp/homepage/clientlibs.js，而对于最近的帖子 (/content/recent-posts.html)，路径是/etc/designs/myapp/posts/clientlibs.js

问题是如何为这些资产编写 URL？

我尝试使用此要点中的全局变量，但没有运气。他们都没有返回资产的正确路径。

4

1 回答 1

2

由于客户端库路径到页面的映射似乎是特定于应用程序的，因此您需要实现一种方法来检测页面类型和所需的客户端库。

您可以使用 clientlib 类别为每种页面类型组装正确的位（查看https://docs.adobe.com/docs/en/aem/6-3/develop/the-basics/clientlibs.html以及如何clientlib 包含在/libs/granite/sightly/templates) 中实现。

此外，如果使用 AEM 6.3，请考虑使用可编辑模板并在模板级别设置客户端库。

如果您已经使用了 clientlib 类别并且只想重写 clientlib include 的输出，您可以创建自己的帮助程序来提取 URL：

package apps.test;

import javax.script.Bindings;

import java.util.ArrayList;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import org.apache.sling.scripting.sightly.pojo.Use;

import libs.granite.sightly.templates.ClientLibUseObject;

public class Test implements Use {

    ClientLibUseObject obj = null;
    Pattern pattern = Pattern.compile("(?:href|src)=\"(.*?)\"");
    List<String> srcs = null;

    public void init(Bindings bindings) {
        obj = (ClientLibUseObject) bindings.get("clientLibUseObject");
    }

    public List<String> getSrcs() {
        if (srcs == null && obj != null) {
            srcs = new ArrayList<>();
            String tmp = obj.include();
            Matcher matcher = pattern.matcher(tmp);
            while (matcher.find()) {
                srcs.add(matcher.group(1));
            }
        }
        return srcs;
    }
}

然后在你的脚本中调用它：

<link data-sly-use.clientLibUseObject="${'libs.granite.sightly.templates.ClientLibUseObject' @ categories='jquery,jquery-ui', mode='all'}"
          data-sly-use.rewriter="${'Test' @ clientLibUseObject=clientLibUseObject}"
          data-sly-repeat="${rewriter.srcs}"
          rel="preload" href="${item}"/>
于 2017-10-06T17:09:00.530 回答