可以在部分标题/head中有一个样式类和脚本函数，其中样式类和脚本函数在包含在另一个xhtml文件中的xhtml文件中定义。 这里有一个例子：
文件模板.xhtml
<h:body>
<ui:insert name="content" >
Template content
</ui:insert>
</h:body>
文件内容.xhtml
<ui:composition template="template.xhtml">
<h:outputScript target="head">
function contentJS()
{
}
</h:outputScript>
<ui:define name="content">
<ui:include src="subcontent.xhtml"/>
</ui:define>
</ui:composition>
文件子内容.xhtml
<ui:composition ...>
<h:outputScript target="head">
function subcontentJS()
{
}
</h:outputScript>
<style>
.mystyleclass {color:red}
</style>
<div class="mystyleclass">Text color red</div>
</ui:composition>
在结果 xhtml 中，我只有一个 javascript 功能，而不是两个 javascript 函数(contentJS 和 subcontentJS(，而 mystyleclass 不在 head 部分。
标记中有两个问题：
-
定义
contentJS的h:outputScript块不在<ui:define.../>块中，因此不会合并到渲染的输出中。 -
style是一个简单的 html 元素，不会放置在head中，而是直接呈现。将其更改为h:outputStylesheet target="head"。
模板.xhtml：
<!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:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />
<h:body>
<ui:insert name="content">
Template content
</ui:insert>
</h:body>
</html>
内容.xhtml：
<!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:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />
<h:body>
<ui:composition template="template.xhtml">
<ui:define name="content">
<h:outputScript target="head">
function contentJS()
{
}
</h:outputScript>
<ui:include src="subcontent.xhtml" />
</ui:define>
</ui:composition>
</h:body>
</html>
子内容.xhtml：
<!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:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />
<h:body>
<ui:composition>
<h:outputScript target="head">
function subcontentJS()
{
}
</h:outputScript>
<h:outputStylesheet target="head">
.mystyleclass {
color: red
}
</h:outputStylesheet>
<div class="mystyleclass">Text color red</div>
</ui:composition>
</h:body>
</html>