图片链接模板css,如何在Facelets模板中引用CSS / JS /图像资源？

，然后添加target="body"属性。

...

PrimeFaces HeadRenderer

如果你正在使用PrimeFaces，HeadRenderer它将如上所述弄乱默认的

脚本排序。您基本上被迫通过PrimeFaces强制执行订单，这可能会导致混乱和“无法模板”的代码。您可能需要按照此答案中的说明关闭它。

在JAR中打包

您甚至可以将资源打包到JAR文件中。另请参阅具有共享代码的多个JSF项目的结构。

在EL中引用

您可以在EL中使用#{resource}映射让JSF基本上打印资源URL，/context/javax.faces.resource/folder/file.ext.xhtml?ln=library以便您可以将其用作CSS背景图像或favicon。唯一的要求是CSS文件本身也应该作为JSF资源提供，否则EL表达式将不会被评估。另请参见如何将JSF图像资源引用为CSS背景图像URL。.some {

background-image: url("#{resource['images/background.png']}");}

这是一个@import例子。@import url("#{resource['css/other.css']}");

如果您使用的是SCSS编译器(例如Maven的Sass编译器插件)，请记住SCSS处理器可能会将其解释#为特殊字符。在这种情况下，你需要逃避它\。.some {

background-image: url("\#{resource['images/background.png']}");}

引用第三方CSS文件

加载第三方CSS文件，然后可能需要更改参考字体和/或图像以使用#{resource}前一节中描述的表达式，否则UnmappedResourceHandler需要安装以便能够为使用JSF的人提供服务。另请参阅ao Bootsfaces页面在浏览器中显示没有任何样式和如何使用JSF的Font Awesome 4.x CSS文件？浏览器找不到字体文件。

隐藏在/ WEB-INF中

如果您打算通过将整个/resources文件夹移动到公共访问中来隐藏资源/WEB-INF，那么您可以从JSF 2.2中选择性地通过新的web.xml上下文参数更改webcontent-relative路径，如下所示：

javax.faces.WEBAPP_RESOURCES_DIRECTORY

/WEB-INF/resources

在较旧的JSF版本中，这是不可能的。

也可以看看：