Question

我的JSF 2.0 Web项目不是从CSS渲染图形。它加载图像，但它不能加载任何背景颜色或任何东西。我在这里做错了吗？我的CSS文件包含着色和其他东西的代码。我正在使用Bootstrap。我的输出页面是纯黑色和白色。我没有在Eclipse中看到任何错误消息。

<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
  <h:head>
    <f:facet name="meta-tags">
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Aayush Mittal</title>
    </f:facet>


    <!-- Bootstrap -->
    <f:facet name="css-files">
        <h:outputStylesheet name="css/bootstrap.css"></h:outputStylesheet>
        <h:outputStylesheet name="css/additional.css"></h:outputStylesheet>
        <h:outputStylesheet name="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800"></h:outputStylesheet>
        <h:outputStylesheet name="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"></h:outputStylesheet>
    </f:facet>


    <f:facet name="js-files">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <h:outputScript  name="js/bootstrap.min.js"></h:outputScript>
        <h:outputScript name="js/custom.js"></h:outputScript>
    </f:facet>

  </h:head>

  <h:body class="main-body" data-spy="scroll" data-target="#navbar-collapse1" data-offset="50">

    <div class="container-fluid body-prop1" id="home">
        <div class="container-fluid section-contents">
            <h1 class="welcome-text">Hola, Amigo!</h1>
            <div class="container-fluid personal-info">
                <p class="personal-info-text">
                    This website is my experiment with Bootstrap framework. I will try to put up my college projects and personal projects live here. I would also add some interesting stuff
                    including some blog posts. Feel free to "Stalk" me on Twitter, check out my code on GitHub, or just shoot me an Email if you find anything interesting. 
                </p>
            </div>
        </div>
    </div>



  </h:body>
</html>

这是我项目的目录结构：

Answer 1

好的，所以我将所有文件夹 - images，js，fonts和css转移到资源目录，并将该目录移到WEB-INF文件夹下。之后，我将以下代码添加到我的web.xml文件中：

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

这使事情发挥作用。现在我遵循使用资源文件夹的官方模式，我不得不摆脱相对路径并仅使用文件名。文件所在文件夹的名称转到库属性。例如：

<h:outputStylesheet name="css/bootstrap.css"></h:outputStylesheet>

变为

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

此外，可以将resources文件夹放在WebContent目录中，只要将所有信息放在web.xml中即可。我正在写这些说明，万一有人被困在同一件事上！

CSS无法在JSF 2.0项目中工作

1 个答案: