创建公共的header

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links,styles)">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" th:href="@{/wms/static/css/bootstrap.min.css}"/>
    <title th:replace="${title}">默认系统名称</title>
</head>
</html>

  • 首先通过html的xmlns属性引入thymeleaf的命名空间。
  • 通过th:fragment标签定义一个模板(值是模板的ID，整个页面唯一)，如果是引入整个页面，这个模板标签则不是必须的，它的作用是让其他页面可以包含某个页面的某个代码片段，通过模板ID区分。
  • th:fragment标签值的括号里面的是参数，其他页面包含这个模板的时候可以传递参数过来，然后通过${参数名}格式获取参数值
  • link元素中的th:href也可以传统css样式表引入的方式，两种都可以生效

引入公共header

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common_header :: common_header(~{::title},~{::link},~{})">
    <title>登录</title>
</head>

在html的head元素中通过th:replace属性引入，值为模板的路径，不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)。ID后面括号是给模板传递参数，通过~{::元素名}格式能获取指定元素的文本。