百里香布局:装饰似乎没有按预期工作

时间:2018-05-28 07:46:16

标签: thymeleaf spring-boot-maven-plugin

我有一个百万美元的项目但是我在使用布局时遇到问题:装饰因为没有得到预期的输出。我查看过以前的stackoverflow帖子,但他们没有帮助。这就是我所做的。我需要一些帮助,因为我不知道出了什么问题。

的pom.xml

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
    <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
    <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
</properties>

<强烈> header.html中

   <header th:fragment="header">

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Register</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Log in</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
       <li class="nav-item">
        <a class="nav-link" href="#">Users</a>
      </li>
       <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="hidden"/>
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Logout</button>
    </form>
  </div>
</nav>

</header>

footer.html

   <div th:fragment="footer">

    <p>
    &copy; 2018 Collinewait
    </p>

</div>

main_layout.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../static/css/style.css" th:href="@{css/style.css}"/>
<link rel="stylesheet" href="../../static/css/materia/bootstrap.min.css" th:href="@{css/materia/bootstrap.min.css}"/>
<script th:src="@{webjars/jquery/jquery.min.js}"></script>
<script th:src="@{webjars/bootstrap/bootstrap.min.js}"></script>
</head>
<body>
    <div th:replace="fragments/header::header"></div>

    <div layout:fragment="content">

    </div>

    <div th:replace="fragments/footer::footer"></div>
</body>
</html>

的index.html

    <!DOCTYPE html>
<html xmlns:th="http:www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{fragments/main_layout}">
<head>

</head>
<body>

    <div layout:fragment="content" class="container">
        <div class="jumbotron">
            <p>Hello its Colline wait</p>
        </div>

    </div>
</body>
</html>

它只显示:你好它的Colline等待。没有页眉和页脚。

资源结构如下 this 。感谢。

1 个答案:

答案 0 :(得分:1)

尝试更改此依赖项

<!-- https://mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect -->
<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
    <version>2.3.0</version>
</dependency>

通过

 <dependency>
        <groupId>com.github.zhanhb</groupId>
        <artifactId>thymeleaf-layout-dialect</artifactId>
        <version>2.3.0</version>
    </dependency>

这对我有用