thymeleaf模板页面两种布局方案

最新推荐文章于 2024-08-10 08:32:58 发布

guying4875

最新推荐文章于 2024-08-10 08:32:58 发布

阅读量2w

点赞数 5

分类专栏： thymeleaf

本文链接：https://blog.csdn.net/guying4875/article/details/81181038

版权

thymeleaf 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

方案一：

采用th:include + th:replace方式进行布局

首先创建布局文件layout1.html

页面中内容如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布局方案</title>
    <style>
        * {font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;}
        .header {background-color: #f5f5f5;padding: 20px;}
        .header a {padding: 0 20px;}
        .container {padding: 20px;margin:20px auto;}
        .footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;}
    </style>

</head>
<body>
    <header class="header">
        <div>
            采用th:replace方式进行布局
        </div>
    </header>
    <div  class="container" th:include="::content">页面正文内容</div>
    <footer class="footer">
        <div>
            <p style="float: left">&copy; Hylun 2017</p>
            <p style="float: right">
                Powered by <a href="http://my.oschina.net/alun" target="_blank">Alun</a>
            </p>
        </div>
    </footer>

</body>
</html>

其中关键点为：

<div  class="container" th:include="::content">正文内容</div>

此处为页面中变化的正文内容部分

第二步：编写页面正文内容text.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="demo/layout1">
    <div th:fragment="content">
        页面中正文内容：采用th:include + th:replace方式进行页面布局
    </div>
</html>

此处需要注意为：

th:replace="demo/layout1 内容，该内容指引了第一步中layout1.html文件所在目录位置

第三步：编写后端链接地址：

编写demo.java类

@Controller
public class DemoController {

    /**
     * 验证采用th:replace方式布局的方式
     * @return
     */
    @RequestMapping("layout1")
    public String testLayout1(){
        return "text";
    }

    


}

然后启动程序访问得到内容为：

方案二：

采用layout方式设置

第一步：要在pom.xml文件中依赖

<dependency>
      <groupId>nz.net.ultraq.thymeleaf</groupId>
      <artifactId>thymeleaf-layout-dialect</artifactId>
      <version>2.3.0</version>
    </dependency>

第二步：编写布局页面layout2.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>layout布局方案</title>
    <style>
        * {font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;}
        .header {background-color: #f5f5f5;padding: 20px;}
        .header a {padding: 0 20px;}
        .container {padding: 20px;margin:20px auto;}
        .footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;}
    </style>

</head>
<body>
    <header class="header">
        <div>
            采用layout方式进行布局
        </div>
    </header>
    <div  class="container" layout:fragment="content"></div>
    <footer class="footer">
        <div>
            <p style="float: left">&copy; Hylun 2017</p>
            <p style="float: right">
                Powered by <a href="http://my.oschina.net/alun" target="_blank">Alun</a>
            </p>
        </div>
    </footer>

</body>
</html>

关键点：

xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"  ： 引入layout标签

<div  class="container" layout:fragment="content">页面正文内容</div>  设置页面正文内容所在位置

第三步：编写内容页面：text2.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="demo/layout2">
    <div layout:fragment="content">
        正文内容222222222222
    </div>
</html>

关键点：

layout:decorator="demo/layout2"  ：此位置指向layout2.html页面位置

layout:fragment="content"  ：指定页面正文内容 content要与layout2.html页面中定义的名字一致

第四步：定义链接地址 demo.java

@Controller

public class DemoController {

   

    /**
     * 验证采用layout方式布局的方式
     * @return
     */
    @RequestMapping("layout2")
    public String testLayout2(){
        return "demo/text2";
    }


}

访问后显示内容：

扩展内容：模板间传参

当采用方案一时，模板间可以进行参数传递

layout1.html文件内容

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布局方案</title>
    <style>
        * {font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;}
        .header {background-color: #f5f5f5;padding: 20px;}
        .header a {padding: 0 20px;}
        .container {padding: 20px;margin:20px auto;}
        .footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;}
    </style>

</head>
<body>
    <header class="header">
        <div>
            采用th:replace方式进行布局
        </div>
    </header>
    <div  class="container" th:include="::content('传入参数111111')"></div>
    <footer class="footer">
        <div>
            <p style="float: left">&copy; Hylun 2017</p>
            <p style="float: right">
                Powered by <a href="http://my.oschina.net/alun" target="_blank">Alun</a>
            </p>
        </div>
    </footer>

</body>
</html>

内容页面text1.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="demo/layout1 (title='replace方式布局')">
    <div th:fragment="content(text)">
        页面中正文内容：采用th:include + th:replace方式进行页面布局
        模板传输参数为：<span th:text="${text}"></span>
    </div>
</html>

详情参见：https://blog.csdn.net/mygzs/article/details/52527758