java+thymeleaf-layout-dialect+thymeleaf的使用

一，添加pom.xml文件依赖

       <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
            <version>2.4.1</version>
        </dependency>

二，如下两个文件代码

index.html引用模板文件,PS:(layout:decorate="testlayout/layout",这个必须注意，模板文件的地址)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{testlayout/layout}">
<head lang="en">
    <title>Search</title>
</head>
<body>
<div class="row" layout:fragment="content">
    <h4 class="indigo-text center">中间部分e</h4>

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

模板文件

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
  <title>Insert title here</title>

</head>
<body>
<div>
  <div th:replace="/testlayout/test::nav"></div>
</div>
<section layout:fragment="content">
  <p>Page content goes here</p>
</section>
<div>
 尾部
</div>
</body>
</html>

test.html导航文件代码，PS:<div th:replace="/testlayout/test::nav"></div>注意这个地址，不能写错，我的文件都是在testlayout这个文件目录下的

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="nav">
  <nav>
    <ul class="columnbar">
      <li><a href="/#">首页</a></li>
      <li><a href="/#">首页</a></li>
      <li><a href="/#">首页</a></li>
      <li><a href="/#">首页</a></li>
      <li><a href="/#">首页</a></li>
    </ul>
  </nav>
</div>
</body>
</html>

 

posted @ 2020-02-03 17:53  叶丶梓轩  阅读(1634)  评论(0)  编辑  收藏  举报