css - JSF doesn't seem to cope with relative links in the css when using a library attribute

Question

我对 JSF 很陌生，所以不确定我是否只是昏昏欲睡，但是当我使用 <h:outputStylesheet library="default" name="bootstrap/css/bootstrap.css"/> 时样式表很好，但是 Bootstrap css 的以下部分中的相关链接:

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

不工作。我发现让它们工作的唯一方法是删除库并手动将 Bootstrap css 指定为 <h:outputStylesheet name="default/1_2/bootstrap/css/bootstrap.css"/>或编辑 css 以包含 ?ln=default在 URL 上。

我不想编辑 bootstrap.css，因为这似乎是一件疯狂的事情，而且我真的不想手动更新 1_2至 1_3当我更改 CSS 时在我的模板中。谁能提供任何替代方案。例如，有没有办法让 faces servlet 假设 ln=default ？

Answer 1

由于 outputStylesheet 将库和版本参数附加到资源 url 的末尾，因此您不能在 css 中使用相对路径。

选项 1:您需要使用以下 EL 模式将 css 中的 url 属性转换为使用 JSF 样式路径:

#{resource['<libarary>:<filepath>']}

例如，如果您的字体安装在“default/bootstrap/fonts”的默认库中，则需要按如下方式更改您的 css 文件:

src: url('#{resource['default:bootstrap/fonts/glyphicons-halflings-regular.eot']}');

选项 2:如果您不想修改您的 css 文件，另一个选项是添加一个过滤器，通过附加预期的 .xhtml 和默认库名称:

import java.io.IOException;

import javax.faces.application.ResourceHandler;
import javax.servlet.DispatcherType;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;


@WebFilter(value = "/*", dispatcherTypes = { DispatcherType.REQUEST, DispatcherType.FORWARD })
public class RelativePathFacesFilter implements Filter {

    private FilterConfig filterConfig;

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        this.filterConfig = filterConfig;
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        String requestPath = ((HttpServletRequest) request).getServletPath();
        if (requestPath.startsWith(ResourceHandler.RESOURCE_IDENTIFIER) && !requestPath.endsWith(".xhtml")) {
            String path = requestPath + ".xhtml?ln=default";
            filterConfig.getServletContext().getRequestDispatcher(path).forward(request, response);
            return;
        }

        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
    }

}

使用此方法背后的警告是您正在跳过资源版本控制的好处，这将使在不要求刷新浏览器缓存的情况下向该版本提供更新变得更加困难。最简单的解决方法是在资源名称本身中包含资源的版本(例如 bootstrap_1_0/css/bootstrap.css)。