thymeleaf模板传值

最新推荐文章于 2023-05-28 14:08:48 发布

贤云（xianyun）

最新推荐文章于 2023-05-28 14:08:48 发布

阅读量6.6k

点赞数

分类专栏： ylcf Spring Boot thymeleaf 文章标签： javascript 后端 ViewUI

本文链接：https://blog.csdn.net/zhengun/article/details/84918578

版权

ylcf 同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

Spring Boot

10 篇文章 0 订阅

订阅专栏

thymeleaf

2 篇文章 0 订阅

订阅专栏

thymeleaf的layout常用的有两种方式用法

第一种

将页面里的每个部分都分成 块 -> fragment 使用 th:include 和 th:replace 来引入页面

这种用法没有layout的概念, 因为每个部分都是 fragment, 下面例子说明

 
   <!-- index.html -->
<html>
  <head>
    <meta charset="utf-8"/>
    <title>demo</title>
  </head>
  <body>
    <div th:include="components/header :: header"></div>
    <div class="container">
      <h1>hello world</h1>
    </div>
    <div th:include="components/footer :: footer"></div>
  </body>
</html>
 
  

 
   <!-- components/header.html -->
<header th:fragment="header">
  <ul>
    <li>news</li>
    <li>blog</li>
    <li>post</li>
  </ul>
</header>
 
  

 
   <!-- components/footer.html -->
<header th:fragment="footer">
  <div>i am footer.</div>
</header>

上面例子里用到的是th:include, 也就是把定义好的fragment引入的意思, 还有一个是th:replace, 意思是替换当前页面里的这部分代码, 下面例子说明一下

 
   <html>
  <head>
    <meta charset="utf-8"/>
    <title>demo</title>
  </head>
  <body>
    <div th:replace="components/header :: header">
      <!-- 使用th:replace进来的header.html会替换下面的这个header -->
      <header>
        <ul>
          <li>static - news</li>
          <li>static - blog</li>
          <li>static - post</li>
        </ul>
      </header>
    </div>
    <div class="container">
      <h1>hello world</h1>
    </div>
    <div th:include="components/footer :: footer"></div>
  </body>
</html>
 
  

第二种

写一个layout.html页面,当作页面的基础页面

 
   <!-- layout/layout.html -->
<html>
  <head>
    <meta charset="utf-8"/>
    <title>demo</title>
  </head>
  <body>
    <div th:include="components/header :: header"></div>
    <div layout:fragment="content"></div>
    <div th:include="components/footer :: footer"></div>
  </body>
</html>
 
  

在子页面里使用 layout:decorator 来将子页面里的内容加入到 layout.html里去

 
   <!-- index.html -->
<html layout:decorator="layout/layout">
  <head>...</head>
  <body>
    <div layout:fragment="content">
      <h2>hello world!!!</h2>
    </div>
  </body>
</html>
 
  

这样在layout.html里引入的css,js,imgs都可以在子页面里用了,而且在子页面里还可以引入子页面需要用到的css,js,imgs, 就很方便了推荐

模板传值

假如要往header.html里传入一个tab来区别应该高亮哪个菜单,可以使用下面的写法实现

先定一个样式

 
   .active {
  background-color: green;
}

 
   <header th:fragment="header (tab)">
  <ul>
    <li><span th:class="${tab eq 'news'} ? active">news</span></li>
    <li><span th:class="${tab eq 'blog'} ? active">blog</span></li>
    <li><span th:class="${tab eq 'post'} ? active">post</span></li>
  </ul>
</header>
 
  

调用写法

 
   <div th:include="components/header :: header(tab='blog')"></div>