时间戳

首页 > 解决方案 > 启用将 css 加载到 maven 项目的 xhtml 页面中

css - 启用将 css 加载到 maven 项目的 xhtml 页面中

问题描述

我在我的项目中有一个像这样定义的标题，它包括模板所需的所有资产：

header.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:panelGroup>
      <head>
                <meta charset="utf-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <meta name="viewport"
                    content="width=device-width,initial-scale=1,user-scalable=0,minimal-ui" />
                <meta content="Admin Dashboard" name="description" />
                <meta content="ThemeDesign" name="author" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <link rel="shortcut icon" href="../assets/images/favicon.ico" />
                <link href="../assets/css/bootstrap.min.css" rel="stylesheet"
                ....
      </head>
    </h:panelGroup>
</ui:composition>

我将它包含在我的 xhtml 页面中，如下所示：

登录.xhtml：

<?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">


<head>
<title>Login</title>
</head>
<body>
    <ui:include src="/template/header.xhtml" />

    <!--><ui:insert name="menu" /><!--> 
    <!--><ui:insert name="content" /><!-->
    <div class="accountbg">
        <div class="content-center">
            <div class="content-desc-center">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-5 col-md-8">
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="text-center mt-0 m-b-15"><a href="index.html"
                                            class="logo logo-admin"><img src="../assets/images/logo-dark.png" height="30"
                                                alt="logo" /></a></h3>
                                    <h4 class="text-muted text-center font-18"><b>Sign In</b></h4>
                                    <div class="p-2">
                                        <h:form class="form-horizontal m-t-20" >
                                            <div class="form-group row">
                                                <div class="col-12"><h:inputText class="form-control" type="text" required="" value="#{loginManagedBean.emailField}" placeholder="Username" /></div>
                                            </div>
                                            <div class="form-group row">
                                                <div class="col-12">
                                                <h:inputSecret class="form-control" required="" value="#{loginManagedBean.passworField}" placeholder="Password" /></div>
                                            </div>
                                            <div class="form-group text-center row m-t-20">
                                                <div class="col-12">
                                                    <button class="btn btn-primary btn-block waves-effect waves-light" action="#{loginManagedBean.login()}">
                                                        Log In
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="form-group m-t-10 mb-0 row">
                                                <div class="col-sm-7 m-t-20"><a href="passwordRecovery.xhtml"
                                                        class="text-muted"><i class="mdi mdi-lock"></i> Forgot your
                                                        password?</a></div>
                                            </div>
                                        </h:form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end row -->
                </div>
            </div>
        </div>
    </div>
</body>
</html>

登录页面在应用所有 css 的情况下呈现良好，但是当我在 resetpassword.xhtml 中复制相同的操作时，页面呈现完全没有 css，但<img>标签正在正确加载 logo.png。现在我这些是我发现自己做很多多余的步骤：

  1. 清洁和重建工作组。
  2. maven force 更新项目。
  3. 从 Maven 中取出耳朵并清洁服务器。
  4. 重新启动 maven 并重新发布 ear 项目。

重置密码.xhtml：

<?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">



<head>
<title>Reset Password</title>
</head>
<body>

    <ui:include src="/template/header.xhtml" /> 


    <div class="accountbg">
        <div class="content-center">
            <div class="content-desc-center">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-5 col-md-8">
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="text-center mt-0 m-b-15"><a href="Login.xhtml"
                                            class="logo logo-admin"><img src="../assets/images/logo-dark.png" height="30"
                                                alt="logo" /></a></h3>
                                    <h4 class="text-muted text-center font-18"><b>Reset Password</b></h4>
                                    <div class="p-3">
                                        <h:form class="form-horizontal m-t-20">
                                            <div class="alert alert-danger alert-dismissible"><button type="button"
                                                    class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                                Enter your <b>Email</b> and instructions will be sent to you!</div>
                                            <div class="form-group row">
                                                <div class="col-12"><h:inputText class="form-control" type="email" required="" value="#{resetPassword.emailField}" placeholder="Email" /></div>
                                            </div>
                                            <div class="form-group text-center row m-t-20">
                                                <div class="col-12">
                                                <button class="btn btn-primary btn-block waves-effect waves-light" action="#{resetPassword.resetPasswordAction()}">Send Email</button>
                                                 </div>
                                            </div>
                                        </h:form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end row -->
                </div>
            </div>
        </div>
    </div>
</body>
</html>

标签： cssmavenxhtmlear

解决方案

推荐阅读