Thymeleaf系列六模板 template

ゝ一纸荒年。 2021-06-24 15:56 473阅读 0赞

## 1. 概述 ##

在web开发中，我们经常会将公共头，公共尾，菜单等部分提取成模板供其它页面使用。在thymeleaf中，通过th:fragment、th:include、th:replace、参数化模板配置、css选择器加载代码块等实现。下文通过例子来说明用法:

*  fragment语法
 *  通过 th:fragment 和 css选择器加载代码块
 *  th:include 和 th:replace
 *  参数化模板配置

这应该是Thymeleaf系列的最后一篇，不容易啊！夸夸一下自己，呵呵！

**注意**

*  spring boot 1.5.4 默认使用的 thymeleaf 2，这里只演示thymeleaf 2语法

## 2. 例子 ##

### 2.1. 公共页 ###

/templates/template/footer.html  
此页面定义待加载的模板页面

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8" />
    <body>
        
        <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>
    
        <span id="copy-section"> 2017 hry loaded by id=copy-section</span>
    
        
        <span th:fragment="frag(month, date) "> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>
    
      </body>
    
    </html>

### 2.2. fragment语法 ###

/templates/template/footer.html：定义要加载代码块copy

<span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>

/templates/template/template.html：通过th:include在本页中加载以上的代码块copy，fragment加载语法如下：

*  templatename::selector：”::”前面是模板文件名，后面是选择器
 *  ::selector：只写选择器，这里指fragment名称，则加载本页面对应的fragment
 *  templatename：只写模板文件名，则加载整个页面

================== fragment语法 ============================= <br />
        
        <div th:include="template/footer::copy"></div>
        
        <div th:include="::#thispage"></div>
        
        <div th:include="template/footer"></div>
    ================= 加载块 ============================
    <br />
    <span id="thispage">
        div in this page.
    </span>

运行结果输出：

================== fragment语法 ============================= <br />
        
        <div> 2017 hry loaded by fragment=copy</div>
        
        <div>
            div in this page.
        </div>
        
        <div>
            <html>
            <meta charset="UTF-8" />
            <body>
                
                <span> 2017 hry loaded by fragment=copy</span>
    
                <span id="copy-section"> 2017 hry loaded by id=copy-section</span>
    
                
                <span> <span>welcome hry come in 6-19</span></span>
    
              </body>
    
            </html>
    </div>

### 2.3. 通过 th:fragment 和 css选择器加载代码块 ###

/templates/template/footer.html：  
除了th:fragment外，还可以css选择器加载代码块。下文定义th:fragment=”copy”和id=”copy-section”。

<span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>
    
        <span id="copy-section"> 2017 hry loaded by id=copy-section</span>

/templates/template/template.html：

*  通过 th:fragment 加载代码块
 *  通过css选择器加载代码块

================= 通过 th:fragment 和 css选择器加载代码块 =================
    
    <div th:include="template/footer::copy"></div>
    
    <div th:include="template/footer::#copy-section"></div>

运行结果输出：

================= 通过 th:fragment 和 css选择器加载代码块 =================
    
    <div> 2017 hry loaded by fragment=copy</div>
    
    <div> 2017 hry loaded by id=copy-section</div>

### 2.4. th:include 和 th:replace ###

th:include 和 th:replace都是加载代码块内容，但是还是有所不同，下面会展示两者不同。

/templates/template/footer.html：

<span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>

/templates/template/template.html：

*  th:include：加载模板的内容： 读取加载节点的内容（不含节点名称），替换div内容
 *  th:replace：替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div

================= th:include 和 th:replace============================
    
    <div th:include="template/footer::copy">1</div>
    
    <div th:replace="template/footer::copy">2</div>

运行结果输出：

<div> 2017 hry loaded by fragment=copy</div>
    
    <span> 2017 hry loaded by fragment=copy</span>

### 2.5. 参数化模板配置 ###

/templates/template/footer.html：  
指定fragment时，可以指定变量

<span th:fragment="frag(month, date) "> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>

/templates/template/template.html：  
向模板中传入变量值

================= 参数化模板配置 ============================
    <div th:include="template/footer::frag(${month},${date})">...</div>

运行结果输出：

================= 参数化模板配置 ============================
    <div> <span>welcome hry come in 6-19</span></div>

## 3. 代码 ##

详细见代码[Github][]

[Github]: https://github.com/hryou0922/spring_boot/tree/master/thymeleaf/src/main/java/com/hry/spring/template