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>

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. tensorflow 初学习

    tenseroflow 拟合 y = ax*x+b构建神经网络主要分为 4 个步骤:构造数据.构建网络.训练模型.评估及预测模型.此外,还介绍了一些超参数设定的经验和技巧 #coding=utf-8 ...

  2. wireshark的一些快捷键

    恢复原来的大小   ‘crtl’+‘=’  即按住crtl建和=键(backspace左边那个键) 缩小 ‘crtl’+‘-’ 即按住crtl建和-键(backspace左边第二个键) 放大 ‘crt ...

  3. 【剑指offer】栈的压入弹出序列，C++实现（举例）

    原创文章,转载请注明出处! 本题牛客网地址 博客文章索引地址 博客文章中代码的github地址 1.题目 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为第一个序列的出栈序列.注意 ...

  4. three.js中点生成矩阵方法

    正常情况用threejs 点生成matrix4,方法为: 例如生成饶Y轴旋转的矩阵我们要的结果为: [cos, 0, -sin, 0,  0,  1,   0, 0, sin,  0,   cos, ...

  5. Distributed Denial of Service

    Distributed Denial of Service https://www.cnblogs.com/163yun/p/10030890.html 全称Distributed Denial of ...

  6. Oracle基础查询

    select * from teacher--女性老师编号.姓名select tno,tname,gendar from teacher where gendar='女'--姓韩的女性老师编号.姓名. ...

  7. 移动端base.css

    html { color: #333; /*规定主色调,依据业务场景(非必须)*/ background: #F6F6F6; /*规定主背景,依据业务场景(非必须)*/ overflow-y: aut ...

  8. CH0805 防线（秦腾与教学评估）

    题意 lsp 学习数学竞赛的时候受尽了同仁们的鄙视,终于有一天......受尽屈辱的 lsp 黑化成为了黑暗英雄Lord lsp.就如同中二漫画的情节一样,Lord lsp 打算毁掉这个世界.数学竞赛 ...

  9. parceljs 基本使用———又一个前端构建工具

    备注:      又一个新的前端构建工具 1. 安装 yarn global add parcel-bundler 2. 初始化项目 yarn init -y 3. 基本代码 a. 创建 index. ...

  10. bzoj1087互不侵犯King（状压）

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1087 简单的状压dp.但是wa了好几发.注意long long. 注意0和0的连边.而且不能 ...