SpringBoot 学习笔记 Part13

1. 用th:fragment属性或id封装

第一种方式是使用 th:fragment属性来进行公共页面的封装，代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
  
    <div th:fragment="copy">
      copy by th:fragment.
    </div>
  
  </body>
</html>

第二种方式是使用 id 属性来进行公共页面的封装，代码如下：

<div id="copy-section">
  copy by id.
</div>

注：这两种方法都需要借助一个 div 标签来实现公共代码块的封装。

2. 用th:insert、th:replace、th:include抽取

在需要加入公共页面的地方使用属性 th:insert、th:replace、th:include 完成公共页面的抽取。

这三个属性的value值需使用 ~{…}表达式，也可以省去。

使用 th:fragment 封装的抽取：

<body>

  ...

  <div th:insert="~{footer :: copy}"></div>
  <div th:insert="footer :: copy"></div>
  
</body>

使用 id 封装的抽取：

<body>

  ...

  <div th:insert="~{footer :: #copy-section}"></div>
  <div th:insert="footer :: #copy-section"></div>
  
</body>

th:insert、th:replace、th:include 三者的区别：

<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

th:insert 会直接插入到使用 th:insert 的那个标签的标签体里去，最外层标签（div）会还在。
```
<div>
    <footer>
        copy success.
    </footer>
</div>
```
th:replace 会直接把使用 th:replace 的那个标签整个给换了，即干干净净地放入公共页面。
```
<footer>
    copy success.
</footer>
```
th:include 会把公共页面使用 th:fragment 的标签给拿掉，也就是本页面最外层标签还会在，但是公共部分的最外层被除去了。
```
<div>
    copy success.
</div>
```

3. 案例

第一步：案例代码准备。

head标签的样式部分：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <link href="css/style.css" rel="stylesheet" th:href="@{/css/style.css}">
  <link href="css/style-responsive.css" rel="stylesheet" th:href="@{css/style-responsive.css}">

  <script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
  <script src="js/respond.min.js" th:src="@{/js/respond.min.js}"></script>

</head>

body标签体底部的script部分：

<body>
    ...
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modernizr.min.js"></script>
    <script src="js/jquery.nicescroll.js"></script>

    <script src="js/scripts.js"></script>
</body>

第二步：新建一个common.html，meta和title标签不要，并为css和js引用标签添加 thymeleaf 属性。

head标签的样式部分：（新建一个th属性这种方式能在无服务端渲染时打开）

<head>

    <link href="css/style.css" rel="stylesheet" th:href="@{/css/style.css}">
    <link href="css/style-responsive.css" rel="stylesheet" th:href="@{css/style-responsive.css}">

    <script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
    <script src="js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
        
</head>

body标签体底部的script部分：

<body>
    ...
    <script th:src="@{/js/jquery-1.10.2.min.js}"></script>
    <script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
    <script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/modernizr.min.js}"></script>
    <script th:src="@{/js/jquery.nicescroll.js}"></script>

    <script th:src="@{/js/scripts.js}"></script>
</body>

第三步：使用th:fragment属性或id封装。

head标签的样式部分：（直接用head标签里即可）

<head th:fragment:"commonheader">

    <link href="css/style.css" rel="stylesheet" th:href="@{/css/style.css}">
    <link href="css/style-responsive.css" rel="stylesheet" th:href="@{css/style-responsive.css}">

    <script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
    <script src="js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
        
</head>

body标签体底部的script部分：（body还有放别的公共部分，所以另起一个div）

<body>
    ...
    <div th:fragment="commonscript">
        <script th:src="@{/js/jquery-1.10.2.min.js}"></script>
        <script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
        <script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <script th:src="@{/js/modernizr.min.js}"></script>
        <script th:src="@{/js/jquery.nicescroll.js}"></script>

        <script th:src="@{/js/scripts.js}"></script>
    </div>
</body>

第四步：在需要使用公共页面的html里抽取即可。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

   <div th:replace="common :: commonheader"></div>

</head>
<body>
    
    ...
    
	<div th:replace="common :: #commonscript"></div>
    
</body>
</html>