Question

我有基于JSF的页面的以下主模板文件：

<!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://java.sun.com/jsf/facelets"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:p="http://primefaces.org/ui">
<h:head>
   <title><ui:insert name="title">MyApp</ui:insert></title>
   <h:outputStylesheet name="stylesheet.css" library="styles"/>
</h:head>

<h:body>

   <div id="container">
      <div id="header">
         <ui:insert name="header">
            // header content
         </ui:insert>
      </div>

      <div id="content">
         <ui:insert name="content">
         </ui:insert>
      </div>

      <div id="footer">
         <ui:insert name="footer">
         </ui:insert>
      </div>
   </div>
</h:body>

</html>

在标题部分，我们有stylesheet.css。此样式表包含所有页面共有的全局样式。

在模板客户端中，我想添加页面特定的样式表。所以，我尝试在我的模板客户端页面中添加以下行：

<ui:composition template="/pages/templates/template.xhtml">
   <ui:define name="content">
      <h:outputStylesheet name="indexPage.css" library="styles" target="head"/>

      // body content

</ui:composition>

然而，这似乎并没有在生成的HTML头部添加indexPage.css。

我正在使用Mojarra 2.1.2。它是否支持target属性？我没有看到它被列为Eclipse中我的autosuggest选项中的可用选项之一。

如果没有，如何在仍使用模板的同时注入其他页面特定的CSS？

Answer 1

在head部分的新模板内容中添加主模板文件，专门用于 css 文件链接：

<h:head>
   <title><ui:insert name="title">MyApp</ui:insert></title>
   <h:outputStylesheet name="stylesheet.css" library="styles"/>
   <ui:insert name="css"/>
</h:head>

在模板客户端页面中添加如下页面特定的样式表：

<ui:composition template="/pages/templates/template.xhtml">
   <ui:define name="css">
      <h:outputStylesheet name="indexPage.css" library="styles"/>
   </ui:define>
   ...
</ui:composition>

而不是使用h:outputStylesheet coud <link rel="stylesheet" type="text/css" href="relative path to css file">。重要的是，主模板中的{strong> css ui:insert应位于h:head内。

Answer 2

我刚遇到一个类似的问题，一位朋友帮了我。解决方案是在ui：composition

的子标题中导入css

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/template.xhtml"
>
    <ui:define name="subheader">
        <h:outputStylesheet library="css" name="my-style.css" />
    </ui:define>

    <ui:define name="content">
    </ui:define>
    </ui:composition>

在Facelets模板客户端中注入其他样式表（或脚本）

2 个答案: