thymeleaf 使用说明
一. 获取后台给的属性值 ‘${}’, 例如:controller类,其页面书写方法:
(1) 单个属性值
// 单属性 例如: <div th:text="${userName}">用户名</div>
// 对象中属性 例如:<div th:text="${user.userName}">用户名</div>
(2) map属性值
例如:<div th:text="${config.get('userName')}">用户名</div>
(3) 特殊符号拼接取值用“| 内容 |”
例如:<div th:text="|${config.get('userName')} - ${userAge}|+'岁' ">用户名 - 年龄</div>
(4) meta标签获取内容 th:content 标签
例如:<meta name="description" th:content="${config.get('webDescription')}" />
二. 超链接取值 ‘@{}’, 其主要应该在html页面
(1) html页面引入css
//其中@{静态文件夹下的内容(static)}
<link rel="stylesheet" th:href="@{/css/index.css}" />
(2) 超链接标签, 例如:
<a th:href="@{/myhome}">我的主页</a>
(3) html 脚本的引用
//其中@{静态文件夹下的内容(static)}
<script th:src="@{/js/jquery.min.js}" ></script>
(4) 内嵌样式的用法
<header class="header" th:style="'background-img:url('+@{/img/bg.jpg} +'); " />
三. 将代码标记为片段
(1)标记片段
// th:fragment 将代码定义一个片段名
<head th:fragment="headerTemp">
<meta charset="utf-8">
<title th:text="|${config.get('webName')} - ${myPageName}|">我的主页</title>
<meta name="description" th:content="${config.get('webDescription')}"/>
<link rel="favicon ico" th:href="@{${config.get('webfavicon')}}"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{/css/index.css}">
</head>
(2)引用片段
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:include = "include :: headerTemp" />
</html>
(3) 可通过标记片段名进行传参
// 通过片段名定义传参 sidebar-fragment(path)
<aside th:fragment="sidebar-fragment(path)" class="main-sidebar sidebar-dark-primary elevation-4">
// 引用传参 ${path}
<a th:href="@{/index}" th:class="${path}=='index'?'nav-link active':'nav-link'">
<p>Dashboard</p>
</a>
</aside>