創(chuàng)建公共的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}">默認(rèn)系統(tǒng)名稱</title>
</head>
</html>

  • 首先通過html的xmlns屬性引入thymeleaf的命名空間。
  • 通過th:fragment標(biāo)簽定義一個(gè)模板(值是模板的ID，整個(gè)頁面唯一)，如果是引入整個(gè)頁面，這個(gè)模板標(biāo)簽則不是必須的，它的作用是讓其他頁面可以包含某個(gè)頁面的某個(gè)代碼片段，通過模板ID區(qū)分。
  • th:fragment標(biāo)簽值的括號(hào)里面的是參數(shù)，其他頁面包含這個(gè)模板的時(shí)候可以傳遞參數(shù)過來，然后通過${參數(shù)名}格式獲取參數(shù)值
  • link元素中的th:href也可以傳統(tǒng)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后面括號(hào)是給模板傳遞參數(shù)，通過~{::元素名}格式能獲取指定元素的文本。