目前我有两个页面和一个模板：
myapp (war)
|-myTemplate.xhtml //yes i know, the template is in the main folder :(
|-page1.xhtml
|-folder
|--page2.xhtml
page1和page2具有相同的结构
所以，当我访问page1时，jsf模板呈现得非常好，但是，当我尝试查看page2时，一切看起来都是扭曲的。在这种情况下，模板不起作用。
web.xml具有＆＃39; url模式＆＃39;这样：
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
编辑：页面非常简单，模板更加精细
page1.xhtml和page2.xhtml ：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
template="./mainTemplate.xhtml">
<ui:define name="content">
<h1>
<h:outputText value="#{i18n['cc.title']}"/>
</h1>
<h:form id="form">
<!-- outputLabels, inputTexts... -->
</h:form>
</ui:define>
</ui:composition>
的template.xhtml
<?xml version='1.0' encoding='iso-8859-1' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:loadBundle var="i18n" basename="co.gov.rnec.srcw.languages.Mensajes"/>
<f:loadBundle var="i18nDefuncion" basename="co.gov.rnec.srcw.languages.MensajesDefuncion"/>
<f:loadBundle var="i18nMatrimonio" basename="co.gov.rnec.srcw.languages.MensajesMatrimonio"/>
<f:loadBundle var="i18nNacimiento" basename="co.gov.rnec.srcw.languages.MensajesNacimiento"/>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles/styles_ani.css" rel="stylesheet" type="text/css"/>
<link href="styles/form_styles.css" rel="stylesheet" type="text/css"/>
<link href="styles/menu.css" rel="stylesheet" type="text/css"/>
<title>#{i18n['srcw.titulo']}</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/general/general.js"></script>
<script type="text/javascript" src="js/general/fechas.js"></script>
<script type="text/javascript" src="js/general/frmvalidaciones.js"/>
</h:head>
<h:body onload="getHora();" >
<div class="container">
<div class="header">
<div class="floatleft">
<a href="#"><img src="images/logorneclittle.jpg" alt="Registraduria Nacional del Estado Civil" name="Logo" width="145" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a>
</div>
<div class="floatleft">
<p class="size50"> </p>
<p class="ani-verdanagriscatorce size50"><h:outputText value="#{i18n['main.titulo.titulo']}" escape="false"/></p>
<p class="ani-verdanaverdedieciseis size50"><h:outputText value="#{i18n['main.titulo.subtitulo1']}" escape="false"/></p>
<p class="ani-verdanagriscatorce size50"><h:outputText value="#{i18n['main.titulo.subtitulo2']}" escape="false"/></p>
<div class="floatleft"><p><a href="logout.jsp">#{i18n["main.titulo.salida"]}</a></p></div>
<div class="floatleft"><p><a href="cambiaclave.jsp">#{i18n["main.titulo.cambiarclave"]}</a></p></div>
</div>
<div class="floatright ani-normalgrisdieztitulo">
<p class="size30"> </p>
<p class="size30"> </p>
<p class="size30"><h:outputText value="#{i18n['main.label.version']}: #{i18n['srcw.version']}" escape="false"/></p>
<p class="size30">#{i18n["main.label.usuario"]}: <h:outputText value="#{sessionScope.nombrecompleto} - #{sessionScope.login}" styleClass="capitalized" /></p>
<p class="size30">#{i18n["main.label.cargo"]}: <h:outputText value="#{sessionScope.grupo}" styleClass="capitalized" /></p>
<p class="size30" id="reloj"></p>
</div>
<br class="clearfloat"/>
<div id="menu" class="menu">
<h:outputText escape="false" value="#{sessionScope.menuAplicacion}"/>
</div>
<!-- end .header -->
</div>
<div id="formulario" class="content">
<!-- a form -->
</div>
</div>
</h:body>
</html>
正如您所看到的，page1与page2具有相同的结构（好吧，显然我相应地修改了模板路径）并且没有消息错误。就在访问page2时，页面格式错误。
答案 0 :(得分：2)
这是因为所有CSS / JS资源都是使用文件夹相对URI引用的。
例如，那两个
<link href="styles/menu.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
实际上将从
下载http://localhost:8080/contextpath/styles/menu.css http://localhost:8080/contextpath/js/jquery-1.8.3.min.js
当您打开page1.xhtml时。
但是，当您打开folder/page2.xhtml时，浏览器将尝试从
http://localhost:8080/contextpath/folder/styles/menu.css http://localhost:8080/contextpath/folder/js/jquery-1.8.3.min.js
显然根本不存在。您应该通过查看浏览器的Web开发人员工具集中的HTTP流量监视器来注意到这个错误（按Chrome / Firefox中的F12＆gt; = 23 / IE＆gt; = 9并检查网络选项卡）。
您基本上需要使这些URL与域相关，即以前导斜杠开头：
<link href="/contextpath/styles/menu.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/contextpath/js/jquery-1.8.3.min.js"></script>
或者如果您担心上下文路径的动态性：
<link href="#{request.contextPath}/styles/menu.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="#{request.contextPath}/js/jquery-1.8.3.min.js"></script>
但是，更好的，实际上是规范的JSF方式，是将所有这些文件放在/resources文件夹中，并使用<h:outputStylesheet>和<h:outputScript>根据指示将它们作为JSF资源引用答案为：How to reference CSS / JS / image resource in Facelets template?
<h:outputStylesheet name="styles/menu.css" />
<h:outputScript name="js/jquery-1.8.3.min.js" />
这样JSF会自动担心生成正确的URL。
无关具体问题：手动包含jQuery JS文件是麻烦的，因为你正在使用PrimeFaces。另请参阅Adding jQuery to PrimeFaces results in Uncaught TypeError over all place的答案。