常用的表达式
定位资源
th:src="@{}"
th:href="@{}"
取变量或者写表达式
${}
获取message-国际化
#{}
fragment 引入
~{}
thymeleaf的简单表达:
fragment 引入很有用可以用来精简代码量:
由于我的前端页面中页面头部和侧边栏是一样的,那么就应该进行抽取公共逻辑。在需要的地方进行引入。
thymeleaf 来实现:
1.提取出来公共逻辑到commoms.html中
添加属性:th:fragment="sidebar" 方便其他页面引入
2.引入其他页面
th:insert=“~{commoms/commoms::sidebar}”
th:replace=“~{commoms/commoms::sidebar}” 这种方式更好!
<nav class="sidebar sidebar-offcanvas" id="sidebar" th:replace="~{commoms/commoms::sidebar}"></nav>
<div th:insert="~{commoms/commoms::page-header}"></div>
导入thymeleaf的命名空间
<html xmlns:th="http://www.thymeleaf.org">
一些语法使用例子:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Spica Admin</title>
<!-- base:css -->
<link rel="stylesheet" th:href="@{/vendors/mdi/css/materialdesignicons.min.css}">
<link rel="stylesheet" th:href="@{/vendors/css/vendor.bundle.base.css}">
<!-- endinject -->
<!-- plugin css for this page -->
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" th:href="@{/css/style.css}">
<!-- endinject -->
<link rel="shortcut icon" th:href="@{/images/favicon.png}" />
</head>
<body>
<div class="container-scroller d-flex">
<div class="container-fluid page-body-wrapper full-page-wrapper d-flex">
<div class="content-wrapper d-flex align-items-center auth px-0">
<div class="row w-100 mx-0">
<div class="col-lg-4 mx-auto">
<div class="auth-form-light text-left py-5 px-4 px-sm-5">
<div class="brand-logo">
<img th:src="@{/images/logo.svg}" alt="logo">
</div>
<!-- 三元运算-->
<h4 th:text= "(${not #strings.isEmpty(errorUser)} ? ${errorUser}: #{login.start})" ></h4>
<!-- 取国际化值-->
<h6 class="font-weight-light" th:text="#{login.sign.in.continue}"></h6>
<form class="pt-3" th:action="@{/user/login}">
<div class="form-group">
<input type="text" class="form-control form-control-lg" id="exampleInputEmail1" name="username" th:placeholder="#{login.username}">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-lg" id="exampleInputPassword1" name="password" th:placeholder="#{login.pwd}">
</div>
<div class="mt-3">
<input class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" type="submit" th:value="#{login.singin}">
</div>
<div class="my-2 d-flex justify-content-between align-items-center">
<div class="form-check">
<label class="form-check-label text-muted">
<input type="checkbox" class="form-check-input" >
<!-- 没有元素,裸text直接取值-->
[[#{login.remember.login}]]
</label>
</div>
<a href="#" class="auth-link text-black">[[#{login.forget.password}]]</a>
</div>
<div class="mb-2">
<button type="button" class="btn btn-block btn-facebook auth-form-btn">
<i class="mdi mdi mdi-email mr-2"></i>[[#{login.connect}]]
</button>
</div>
<div class="text-center mt-4 font-weight-light">
[[#{login.dont.have.account}]] <a th:href="@{/pages/samples/register.html}" class="text-primary">[[#{login.create}]]</a>
</div>
<div class="text-center mt-4 font-weight-light">
<!-- url传参数-->
<a th:href="@{/index.html(lang='zh_CN')}" class="auth-link text-black margin">中文</a>
<a th:href="@{/index.html(lang='en_US')}" class="auth-link text-black margin">English</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- base:js -->
<script th:src="@{/vendors/js/vendor.bundle.base.js}"></script>
<!-- endinject -->
<!-- inject:js -->
<script th:src="@{/js/off-canvas.js}"></script>
<script th:src="@{/js/hoverable-collapse.js}"></script>
<script th:src="@{/js/template.js}"></script>
<!-- endinject -->
</body>
</html>