thymeleaf的layout常用的有两种方式用法
  1. 第一种
    将页面里的每个部分都分成 块 -> fragment 使用 th:include 和 th:replace 来引入页面
    这种用法没有layout的概念, 因为每个部分都是 fragment, 下面例子说明
  1. <!-- index.html -->
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>demo</title>
  6. </head>
  7. <body>
  8.     <div th:include="components/header :: header"></div>
  9.     <div class="container">
  10.         <h1>hello world</h1>
  11.     </div>
  12.     <div th:include="components/footer :: footer"></div>
  13. </body>
  14. </html>
  15.  
  16. <!-- components/header.html -->
  17. <header th:fragment="header">
  18. <ul>
  19.     <li>news</li>
  20.     <li>blog</li>
  21.     <li>post</li>
  22. </ul>
  23. </header>
  24. <!-- components/footer.html -->
  25. <header th:fragment="footer">
  26. <div>i am footer.</div>
  27. </header>
  1. 上面例子里用到的是th:include, 也就是把定义好的fragment引入的意思, 还有一个是th:replace, 意思是替换当前页面里的这部分代码, 下面例子说明一下
  1. <html>
  2. <head>
  3.     <meta charset="utf-8"/>
  4.     <title>demo</title>
  5. </head>
  6. <body>
  7.     <div th:replace="components/header :: header">
  8.         <!-- 使用th:replace进来的header.html会替换下面的这个header -->
  9.         <header>
  10.             <ul>
  11.                 <li>static - news</li>
  12.                 <li>static - blog</li>
  13.                 <li>static - post</li>
  14.             </ul>
  15.         </header>
  16.     </div>
  17.     <div class="container">
  18.         <h1>hello world</h1>
  19.     </div>
  20.     <div th:include="components/footer :: footer"></div>
  21. </body>
  22. </html>
  1. 第二种
    写一个layout.html页面,当作页面的基础页面
  1. <!-- layout/layout.html -->
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>demo</title>
  6. </head>
  7. <body>
  8.     <div th:include="components/header :: header"></div>
  9.     <div layout:fragment="content"></div>
  10.     <div th:include="components/footer :: footer"></div>
  11. </body>
  12. </html>
  1. 在子页面里使用 layout:decorator 来将子页面里的内容加入到 layout.html里去
  1. <!-- index.html -->
  2. <html layout:decorator="layout/layout">
  3. <head>...</head>
  4. <body>
  5.     <div layout:fragment="content">
  6.         <h2>hello world!!!</h2>
  7.     </div>
  8. </body>
  9. </html>
  1. 这样在layout.html里引入的css,js,imgs都可以在子页面里用了,而且在子页面里还可以引入子页面需要用到的css,js,imgs, 就很方便了 推荐
    模板传值,假如要往header.html里传入一个tab来区别应该高亮哪个菜单,可以使用下面的写法实现, 先定一个样式
  1.  .active {background-color: green;}
  1. <header th:fragment="header (tab)">
  2. <ul>
  3.     <li>
  4.         <span th:class="${tab eq 'news'} ? active">news</span>
  5.     </li>
  6.     <li>
  7.         <span th:class="${tab eq 'blog'} ? active">blog</span>
  8.     </li>
  9.     <li>
  10.         <span th:class="${tab eq 'post'} ? active">post</span>
  11.     </li>
  12. </ul>
  13. </header>
  1. 调用写法
  1. <div th:include="components/header :: header(tab='blog')"></div>

thymeleaf layout的更多相关文章

  1. 解决thymeleaf layout布局不生效

    今天使用thymeleaf layout布局时总是不生效,特此把解决问题的步骤和几个关键点记录下来备忘. 一.检查依赖 1.thymeleaf必备maven依赖: <dependency> ...

  2. 关于thymeleaf+layout布局的使用方式，spring boot 访问页面（静态页面及jsp页面）

    首先建立相同部分的html,这里我命名为layout.html,放在了`templates/layout'文件夹下,这个路径以后是会用到的,以下是我的layout的代码,比较粗糙. 但是应该会更好的帮 ...

  3. 一篇好文档，请Thymeleaf Layout Dialect

    Thymeleaf Layout Dialect https://ultraq.github.io/thymeleaf-layout-dialect/ This will introduce the  ...

  4. Thymeleaf利用layout.html文件生成页面布局框架

    1.layout.html文件 生成布局 <!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www ...

  5. thymeleaf 布局layout

    以前写过一篇使用thymeleaf实现div中加载html 大部分内容都没问题,只是部分知识已经过时了. 重新记录: 依赖依然是 <dependency> <groupId>n ...

  6. thymeleaf 专题

    Thymeleaf 之 内置对象.定义变量.URL参数及标签自定义属性 如标题所述,这篇文章主要讲述Thymeleaf中的内置对象(list解析.日期格式化.数字格式化等).定义变量.获取URL的参数 ...

  7. springboot~thymeleaf页面布局的步骤

    参考:https://ultraq.github.io/thymeleaf-layout-dialect/Installation.html 依赖包 注意里面的thymeleaf-layout-dia ...

  8. springboot+mybatis+thymeleaf项目搭建及前后端交互

    前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...

  9. Spring-boot(二）--thymeleaf

    @Controller @RequestMapping("/") public class MessageController { private final MessageRep ...

随机推荐

  1. 密钥库文件格式[keystore]代码

    密钥库文件格式[keystore]代码 格式    :     JKS 扩展名  :      .jks/.ks 描述    :     [Java Keystore]密钥库的Java实现版本,pro ...

  2. stark组件03

    优化代码 1:页面的增删改查url反转的封装到类里:ModelSatrk # 编辑页面的url def get_edit_url(self,obj): edit_url = reverse(" ...

  3. MacDown语法

    markdown编辑器太多,作为新手比较容易MacDown 相对容易上手,切使用简单方便,满足一般需求 下载地址:http://macdown.uranusjr.com/ ## 标题 # 一级标题 # ...

  4. ASP.NET中几种加密方法

    下面就是ASP.NET中几种加密方法.加密算法有两种,也就是上面提到的MD5和SHA1,这里我举的例子是以MD5为例,SHA1大致相同,只是使用的类不一样. MD5的全称是Message-Digest ...

  5. ZBar的简单使用

    NSRunLoop类声明的编程接口用于管理输入源对象.一个NSRunLoop对象处理像来自窗体系统中的鼠标和键盘事件,NSPORT对象和NSConnection连接对象这类的输入源.一个NSRunLo ...

  6. VS2010单元测试入门实践教程

    单元测试的重要性这里我就不多说了,以前大家一直使用NUnit来进行单元测试,其实早在Visual Studio 2005里面,微软就已经集成了一个叫Test的专门测试插件,经过几年的发展,这个工具现在 ...

  7. Mongodb简单介绍安装

    具体详细内容,请查阅 Mongodb官方文档 一.简单介绍 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. M ...

  8. 系统管理员都要知道的 30 个 Linux 系统监控工具

    1. top - 进程活动监控命令 top 命令会显示 Linux 的进程.它提供了一个运行中系统的实时动态视图,即实际的进程活动.默认情况下,它显示在服务器上运行的 CPU 占用率最高的任务,并且每 ...

  9. cocos2d-js 3.0 ios平台编译打包

    原帖在http://www.cocoachina.com/bbs/read.php?tid=209356 整理到github的https://github.com/faint2death/cocos2 ...

  10. 用js实现屏蔽F12、鼠标右击、鼠标左击

    function window.onhelp(){return false} //屏蔽F1帮助 document.onkeydown = function(){ if(window.event &am ...