Question

我试图预加载资产，如解释here。

我已将这些内容纳入/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

问题是如何撰写这些资产的网址？

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

Answer 1

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

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

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

如果您已经使用了clientlib类别并且只想重写clientlib的输出，那么您可以创建自己的帮助程序来提取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}"/>

获取clientlibs文件的路径

1 个答案: