Fatal编程技术网
  • jsf/
  • Jsf 如何在Facelets模板中引用CSS/JS/image资源？

Jsf 如何在Facelets模板中引用CSS/JS/image资源？

jsf jsf-2

Jsf 如何在Facelets模板中引用CSS/JS/image资源？,jsf,resources,jsf-2,facelets,templating,Jsf,Resources,Jsf 2,Facelets,Templating,我做完了 现在我尝试创建一个与模板不在同一目录中的页面。我对页面样式有问题，因为样式是用相对路径引用的，如下所示： <link rel="stylesheet" href="style_resource_path.css" /> 但当我将应用程序移动到另一个上下文时，这会给我带来麻烦 所以我想知道在Facelets中引用CSS（以及JS和图像）资源的最佳方式是什么？假设您正在web应用程序的子目录中运行。您可以这样尝试： <link href="${facesContext

我做完了

现在我尝试创建一个与模板不在同一目录中的页面。我对页面样式有问题，因为样式是用相对路径引用的，如下所示：

<link rel="stylesheet" href="style_resource_path.css" />
但当我将应用程序移动到另一个上下文时，这会给我带来麻烦

所以我想知道在Facelets中引用CSS（以及JS和图像）资源的最佳方式是什么？

假设您正在web应用程序的子目录中运行。您可以这样尝试：

 <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
介绍 正确的JSF2.x方法是使用
名称
引用相对于webapp的
/resources
文件夹的路径。这样，您就不必像在JSF1.x中那样担心上下文路径。另见

文件夹结构 将CSS/JS/图像文件放入公共webcontent的
/resources
文件夹中，如下所示（如果与
/WEB-INF
和
/META-INF
级别不相同，只需创建一个即可）

WebContent
|--资源
||--css
|| |--other.css
||`--style.css
||--js
||`--script.js
|`--图像
||--background.png
||--favicon.ico
|`--logo.png
|--META-INF
|`--MANIFEST.MF
|--WEB-INF
||--faces-config.xml
|`--web.xml
|--page.xhtml
:
对于Maven，它应该在
/main/webapp/resources
中，因此不是
/main/resources
（这些是用于Java资源（属性/xml/text/config文件），它们必须在运行时类路径中结束，而不是在webcontent中）。另见

facelet中的引用 最终，这些资源在任何地方都可用，而无需修改相关路径：

<h:head>
    ...
    <h:outputStylesheet name="css/style.css" />
    <h:outputScript name="js/script.js" />
</h:head>
<h:body>
    ...
    <h:graphicImage name="images/logo.png" />
    ...
</h:body>
您也可以在任何地方引用
，但默认情况下，它将在您声明它的HTML中结束。如果希望它通过
以
结束，则添加
target=“head”
属性

<ui:define name="...">
    <h:outputScript name="js/script.js" target="head" />
    ...
</ui:define>
PrimeFaces
headender
如果您使用的是PrimeFaces，它的
头枕
将按照上述方式扰乱默认的
脚本顺序。基本上，您必须通过PrimeFaces特定的
强制执行订单，这可能会导致混乱和“无法执行”的代码。您可能需要按照中的说明将其关闭

罐内包装 您甚至可以将资源打包到JAR文件中。另见

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

。一些{
背景图像：url（“#{resource['images/background.png']}”）；
}
下面是
@import
示例

@import url（“#{resource['css/other.css']}”）；
下面是favicon的例子。另见
如果您使用的是SCSS编译器（例如），请记住，SCSS处理器可能会将
#
解释为特殊字符。在这种情况下，您需要使用
\
对其进行转义

.some {
    background-image: url("\#{resource['images/background.png']}");
}
引用第三方CSS文件 通过
加载的第三方CSS文件反过来引用字体和/或图像，可能需要修改以使用上一节所述的
{resource}
表达式，否则需要安装
UnmappedResourceHandler
，以便能够为使用JSF的用户提供服务。另见a.o.和

隐藏在/WEB-INF中 如果您想通过将整个
/resources
文件夹移动到
/WEB-INF
中来隐藏资源，那么您可以从JSF 2.2开始，通过一个新的
WEB.xml
上下文参数来更改webcontent相对路径，如下所示：

<context-param>
    <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
    <param-value>/WEB-INF/resources</param-value>
</context-param>


javax.faces.WEBAPP\u资源\u目录
/WEB-INF/资源
在较早的JSF版本中，这是不可能的

另见：
  • （离你的链接只有两章之遥）
    • 这些答案帮助我解决了同样的问题。虽然我的问题更复杂，因为我在使用SASS和GULP

      我必须改变（请注意#前面的“\”。可能是吞咽的副作用：

       <h:outputStylesheet library="my_theme" name="css/default.css"/>  

 background: $blue url("\#{resource['my_theme/images/background-homepage-h1.png']}");

      
背景：$blueurl（\\\{resource['myu-theme/images/background-homepage-h1.png']）；
      resourcehandlers.UnmappedResourceHandler有助于在/javax.faces.resource/*的URL模式上映射JSF资源

      对我来说，faces-config.xml中有以下两种xml配置： org.omnifaces.resourcehandler.UnmappedResourceHandler

      在web.xml中：

      <servlet-mapping>
<servlet-name>facesServlet</servlet-name>
<url-pattern>/javax.faces.resource/*</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

      
小脸蛋
/javax.faces.resource/*
*.xhtml
      css和图像方面的帮助。

      谢谢。这是我正在搜索的内容。但这不是正确的Facelets方式。这更像是JSP方式。我已经在css中使用了它，但是如果我想用JavaScript引用文件，那么如何使用呢？符号
      url（#{resource['otbofaces:date entry/calendar.gif']}）
      在CSS文件中工作得很好，但是我还没有找到任何可以在javascript文件中使用的东西来获得正确的资源位置。谢谢@BalusC。我选择了一种完全不同的方法，并使用了它。：）我缺少的是，我希望“template.xhtml”也是一种资源。因此，我完全希望使用驻留在
      web/resources/templates/report.xhtml中的模板执行类似
      的操作，甚至可以利用库中的资源结构。它不是那样工作的。谢谢documentation@BalusC首先，感谢你在过去几周里的帮助。对不起，但是如果这仍然没有帮助并且css没有执行，我会做错什么呢？在我的模板头中，我添加了：。在我创建的“网页”文件夹中：“资源/c

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

      

      <context-param>
    <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
    <param-value>/WEB-INF/resources</param-value>
</context-param>

      

       <h:outputStylesheet library="my_theme" name="css/default.css"/>  

 background: $blue url("\#{resource['my_theme/images/background-homepage-h1.png']}");

      

      <servlet-mapping>
<servlet-name>facesServlet</servlet-name>
<url-pattern>/javax.faces.resource/*</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>