在重写 URL 时修复脚本/css 的相对路径

Question

我在 JBoss AS 6.1.0.Final 中使用 JSF2.1 和 RichFaces 4.1。现在，我专注于重写 URL。在尝试了不同的方法后，我决定坚持使用 PrettyFaces，因为它使用起来非常直观（并且在几分钟内就可以使用）。

有一个棘手的问题。到脚本/css 的相对链接搞砸了，因为 URL 发生了变化，并且相对路径以 404 结尾。我可以使用绝对路径，但这将迫使我更改许多页面并在页面的源代码中公开应用程序的结构。

我正在考虑一种临时解决方法：让支持 bean 负责管理这些相关链接的不同级别，但重用 bean 使这成为一件棘手的事情。

我的问题是，在重写 URL 时是否有定义的方法或最佳实践来管理这些相对路径？

编辑

h:outputStylesheet 和 h:outputScript 就像一个魅力。剩下的就是解决 CSS 以相对方式引用图像的一个小问题。采用这种结构：

-------/resources
       |
       ---_img
       |
       ---_css
       |
       ---_js

_css 文件夹中的 CSS 文件引用了位于 _img 文件夹中的图像 image1.png，其相对路径为 ../_img/image1.png。问题是这会以 404 告终，因为它在 /myApp/javax.faces.resource/_img/image1.png 中找不到图像。

在 CSS 中将每个 ../ 更改为 #{request.contextPath}/resources 似乎工作得很好，但我想知道是否有更好的方法来做到这一点。相对路径方法不起作用对我来说似乎很奇怪。

Answer 1

首先，我不明白他们到底是如何以及为什么搞砸的。你不是很清楚。您很可能出于某种原因硬编码纯 HTML <script> 和 <link>（和 <img>）元素，而不是使用 JSF 提供的 <h:outputScript> 和 <h:outputStylesheet>（和 <h:graphicImage>）组件。这些 JSF 组件可以采用相对于 /resources 文件夹的资源名称，并且它们将自动为上下文路径添加前缀，以便它以域相对 URL（带有前导斜杠）而不是请求相对 URL（没有前导斜杠）。

鉴于以下文件夹结构（/resources 文件夹名称是预定义的；您无法更改其名称）：

WebContent
 |-- resources
 |    |-- css
 |    |    `-- style.css
 |    |-- img
 |    |    `-- logo.png
 |    `-- js
 |         `-- script.js
 |-- page.xhtml
 :

那么您应该可以让 JSF 自动生成正确的<script>、<link>（和<img>）元素，如下所示：

<h:head>
    <h:outputStylesheet name="css/style.css" />
    <h:outputScript name="js/script.js" />
</h:head>
<h:body>
    <h:graphicImage name="img/logo.png" />
</h:body>

另见：

• How to reference CSS / JS / image resource in Facelets template?
• JSF 2 specification - 第 2.6 章资源处理

Answer 2

您需要为您的 CSS 文件使用绝对 URL，例如：

/path/to/style.css

代替：

../style.css

如果可以的话，您还希望避免硬编码 url，并使用 JSF2 资源重定位功能：<h:outputStylesheet> 和 <h:outputScript>

以下是一些可能有帮助的链接：

http://ocpsoft.org/support/topic/problem-with-prettyfaces-and-primefaces