thymeleaf
thymeleaf是springboot推薦使用的模板引擎之一，其官網地址為：https://www.thymeleaf.org
thymeleaf-layout-dialect
thymeleaf-layout-dialect是thymeleaf布局框架，可以抽取公共的header，footer，left等html元素和公共的 css，js文件。開發人員只需專注具體的body內容，大大減少了代碼冗余，使代碼簡潔明了，層次清晰。其項目的github地址為：https://github.com/ultraq/thymeleaf-layout-dialect
整合
以springboot項目為例，整合開發thymeleaf布局。
maven坐標：
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- thymeleaf布局 -->
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.3.0</version>
</dependency>
編寫layout頁面
一個典型的layout頁面代碼如下，為了頁面美觀，我這里選擇了引入了vue + element-ui。
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">skindream</title>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" href="/static/assets/css/index.css"/>
<link rel="stylesheet" href="/static/framework/element-ui/element.css"/>
<link rel="stylesheet" href="/static/plugins/nprogress/nprogress.css"/>
</head>
<body>
<div id="app">
<el-container>
<el-header>
<el-menu mode="horizontal" text-color="#202124" active-text-color="#409eff">
<el-menu-item :index="1"><a href="/">skindream</a></el-menu-item>
<el-menu-item :index="2"><a href="/movies">影視</a></el-menu-item>
<el-menu-item :index="3"><a href="/animation">動畫</a></el-menu-item>
<el-menu-item :index="4"><a href="/music">音樂</a></el-menu-item>
<el-menu-item :index="5"><a href="/game">游戲</a></el-menu-item>
<el-menu-item :index="6"><a href="/article">文章</a></el-menu-item>
</el-menu>
<el-menu mode="horizontal">
<el-menu-item index="1"><a href="/login">登錄</a></el-menu-item>
</el-menu>
</el-header>
<el-main>
<!-- 這里可以被其他頁面替換 -->
<div layout:fragment="content"></div>
</el-main>
<footer>
<el-footer>@skindream</el-footer>
</footer>
</el-container>
</div>
<script src="/static/framework/vue/vue.min.js"></script>
<script src="/static/framework/element-ui/element.js"></script>
<script src="/static/plugins/nprogress/nprogress.js"></script>
<script>
NProgress.start();
NProgress.done();
new Vue({
el: '#app'
})
</script>
</body>
</html>
訪問這個layout頁面，頁面效果如下：
編寫content頁面
現在編寫content頁面替換掉中間的空白內容，動畫animation.html代碼如下：
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="/commons/layout">
<head>
<title>動畫</title>
<!-- 這里可以引入該頁面獨有的css文件 -->
<link rel="stylesheet" href="/static/assets/css/animation.css"/>
</head>
<body>
<div layout:fragment="content">
<p>這是動畫</p>
</div>
<!-- 這里可以引入該頁面獨有的js文件 -->
<script src="/static/assets/js/animation.js"></script>
</body>
</html>
其中需要注意的是
layout:decorate="/commons/layout"需要指定到layout.html所在的位置，layout:fragment="content"的content名稱對應的是layout.html中<div layout:fragment="content"></div>的名稱。定義一個controller，代碼如下：
package pers.skindream.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("animation")
public class AnimationController {
@GetMapping
public String toAnimation() {
return "views/animation";
}
}
訪問http://localhost:7001/animation，頁面效果如下：
title-pattern
layout中有這樣一段代碼：
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">skindream</title>
$LAYOUT_TITLE - $CONTENT_TITLE表示頁面title由兩部分組成，layout頁面中的title-content頁面中的title。我這里表現的就是skindream - 動畫
頁面參數傳遞
改造
animation.html，代碼如下：
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorate="/commons/layout" th:with="dio='我不做人了，JOJO！'">
<head>
<title>動畫</title>
<!-- 這里可以引入該頁面獨有的css文件 -->
<link rel="stylesheet" href="/static/assets/css/animation.css"/>
</head>
<body>
<div layout:fragment="content">
<p>這是動畫</p>
</div>
<!-- 這里可以引入該頁面獨有的js文件 -->
<script src="/static/assets/js/animation.js"></script>
</body>
</html>
我這里運用
thymeleaf提高的標簽th:with向layout.html頁面傳遞了一個參數dio改造layout.html接收傳遞過來的參數，代碼如下：
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">skindream</title>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" href="/static/assets/css/index.css"/>
<link rel="stylesheet" href="/static/framework/element-ui/element.css"/>
<link rel="stylesheet" href="/static/plugins/nprogress/nprogress.css"/>
</head>
<body>
<div id="app">
<el-container>
<el-header>
<el-menu mode="horizontal" text-color="#202124" active-text-color="#409eff">
<el-menu-item :index="1"><a href="/">skindream</a></el-menu-item>
<el-menu-item :index="2"><a href="/movies">影視</a></el-menu-item>
<el-menu-item :index="3"><a href="/animation">動畫</a></el-menu-item>
<el-menu-item :index="4"><a href="/music">音樂</a></el-menu-item>
<el-menu-item :index="5"><a href="/game">游戲</a></el-menu-item>
<el-menu-item :index="6"><a href="/article">文章</a></el-menu-item>
</el-menu>
<el-menu mode="horizontal">
<el-menu-item index="1"><a href="/login">登錄</a></el-menu-item>
</el-menu>
</el-header>
<el-main>
<!-- 這里可以被其他頁面替換 -->
<div layout:fragment="content"></div>
</el-main>
<footer>
<el-footer>@skindream - <span th:text="${dio}"></span></el-footer>
</footer>
</el-container>
</div>
<script src="/static/framework/vue/vue.min.js"></script>
<script src="/static/framework/element-ui/element.js"></script>
<script src="/static/plugins/nprogress/nprogress.js"></script>
<script>
NProgress.start();
NProgress.done();
new Vue({
el: '#app'
})
</script>
</body>
</html>
其中
<el-footer>@skindream - <span th:text="${dio}"></span></el-footer>用於接收參數
再次訪問http://localhost:7001/animation，頁面效果如下：
總結
以上就是thymeleaf布局的簡單應用，縱觀下來確實起到了開頭所說的開發人員只需專注具體的body內容，大大減少了代碼冗余，使代碼簡潔明了，層次清晰的作用。