Thymeleaf 之页面模板应用

最新推荐文章于 2024-06-10 19:40:36 发布

知识林

最新推荐文章于 2024-06-10 19:40:36 发布

阅读量6.6k

点赞数

分类专栏： java学习资料

本文链接：https://blog.csdn.net/zsl129/article/details/53003284

版权

java学习资料专栏收录该内容

98 篇文章 1 订阅

订阅专栏

本文章来自【知识林】

本文章主要讲述使用Thymeleaf做页面模板，页面模板的主要作用是将相对公共的页面部份（如站头、站尾及公共的js、css等）提取出现放到模板页面中，在其他需要使用的地方引用该模板即可。

如果对Thymeleaf的基本使用、maven依赖等不清楚的可以先阅读我的另一篇文章《Thymeleaf 之初步使用》。

application.properties

server.port = 1104
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false

Controller

@Controller
public class IndexController {

    @GetMapping(value = "/index")
    public String index(Model model, HttpServletRequest request) {

        return "/web/index";
    }
}

页面模板webModel.html

<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Thymeleaf学习示例</title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <script type="text/javascript" src="/jquery-1.12.3.min.js"></script>
        <script type="text/javascript" src="/bootstrap3/js/bootstrap.min.js"></script>
        <link type="text/css" rel="stylesheet" href="/bootstrap3/css/bootstrap.min.css"/>
    </head>
    <body>
        <div class="container text-center" style="text-align:center;border:1px #3b8cff solid;">
            <h3>头部</h3>
        </div>

        <div class="container-fluid  center-container" style="margin-bottom:70px;">
            <div th:include="this :: content"></div>
        </div>

        <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
            <div class="container text-center login-bottom">
                © 2016
            </div>
        </div>
    </body>
</html>

注意：

1. 需要使用Thymeleaf的命名空间`xmlns:th="http://www.thymeleaf.org"`

2. 本示例使用了`bootstrap`的知识，如有不清楚的可上[官网](http://v3.bootcss.com)学习或直接忽略。

3. 最关键部份：`<div th:include="this :: content"></div>`使用`th:include`来将数据引入进来。
意为将`content`部份的内容引入到这个地方，`content`是在具体页面中体现，此名称可自己定义。

页面index.html

<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="fragments/webModel">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>测试首页</title>
    </head>
    <body>
        <div th:fragment="content" th:remove="tag">
            <h2>这里显示专属本页面的内容</h2>
        </div>
    </body>
</html>

注意：

1. 需要引入Thymeleaf的命名空间：`xmlns:th="http://www.thymeleaf.org"`

2. 需要引入布局layout的命名空间：`xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"`

3. 指定引用的模板名称：`layout:decorator="fragments/webModel"`（名称即为html页面名称）

3. 使用`th:fragment="content"`来启用页面模板，启用的模板根据模板名称和fragment名称而定。
`content`是根据`webModel.html`页面模板中指定的名称而定。

4. 这里使用了`th:remove="tag"`这表示数据加载完成后将当前标题删除。

示例代码：https://github.com/zsl131/thymeleaf-study/tree/master/study04

本文章来自【知识林】

知识林

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Thymeleaf 之页面模板应用

本文章来自【知识林】本文章主要讲述使用Thymeleaf做页面模板，页面模板的主要作用是将相对公共的页面部份（如站头、站尾及公共的js、css等）提取出现放到模板页面中，在其他需要使用的地方引用该模板即可。如果对Thymeleaf的基本使用、maven依赖等不清楚的可以先阅读我的另一篇文章《Thymeleaf 之初步使用》。application.propertiesserver.port =
复制链接

扫一扫