zoukankan      html  css  js  c++  java
  • Thymeleaf的模板使用介绍

    参考网址: https://blog.csdn.net/hry2015/article/details/73476973

    先定义一个html文件, 如下:

    文件路径: 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>
    fragment语法
    
    加载语法如下: templatename::selector:”::” 前面是模板文件名,后面是选择器 ::selector:只写选择器,这里指fragment名称,则加载本页面对应的fragment templatename:只写模板文件名,则加载整个页面

    example:
    <!-- 语法说明 "::"前面是模板文件名,后面是选择器 -->
    <div th:include="
    templates/template/footer::copy"></div>

    <!-- 只写选择器,这里指fragment名称,则加载本页面对应的fragment -->
    <div th:include="::#
    copy-section"></div>

    <!-- 只写模板文件名,则加载整个页面 -->
    <div th:include="
    templates/template/footer"></div>
        <!--  语法说明"::"前面是模板文件名,后面是选择器 -->
        <div> 2017 hry loaded by fragment=copy</div>
    <!-- 只写选择器,这里指fragment名称,则加载本页面对应的fragment --> <div>2017 hry loaded by id=copy-section</div>
    <!-- 只写模板文件名,则加载整个页面 -->
        <div>
            <html>
            <meta charset="UTF-8" />
            <body>
                <spanth: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>
    </
    div>
    <!-- 这里加载”th:fragment 定义用于加载的块“ -->
    <div th:include="templates/template/footer::copy"></div> 

    <!-- 这里加载”id=copy-section“的节点 -->
    <div th:include="templates/template/footer::#copy-section"></div>

    结果:
    <!-- 这里加载”th:fragment 定义用于加载的块“ -->
    <div> 2017 hry loaded by fragment=copy</div>

    <!-- 这里加载”id=copy-section“的节点 -->
    <div> 2017 hry loaded by id=copy-section</div>
    th:include 和 th:replace 区别
    <span th:fragment="copy">2017 hry loaded by fragment=copy</span>
    th:include: 加载模板的内容: 读取加载节点的内容(不含节点名称),替换div内容
    th:replace: 替换当前标签为模板中的标签,加载的节点会整个替换掉加载他的div
    
    <!-- 加载模板的内容: 读取加载节点的内容(不含节点名称),替换<div>的内容 -->
    <div th:include="templates/template/footer::copy">1</div>
    <!-- 替换当前标签为模板中的标签: 加载的节点会整个替换掉加载他的<div>  -->
    <div th:replace="templates/template/footer::copy">2</div>
    
    结果:
    <!-- 加载模板的内容: 读取加载节点的内容(不含节点名称),替换<div>的内容 -->
    <div> 2017 hry loaded by fragment=copy</div>
    
    <!-- 替换当前标签为模板中的标签: 加载的节点会整个替换掉加载他的<div>  -->
    <span> 2017 hry loaded by fragment=copy</span>
     参数化模板配置
    
    <span th:fragment="frag(month, date)"> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>
    
    ${month} 和 ${date}是从后台传过来的
    <div th:include="templates/template/footer::frag(${month},${date})">config</div>
    
    结果:
    <div> <span>welcome hry come in 6-19</span></div>
  • 相关阅读:
    Uva 1636 决斗
    数论初步
    Gym 100169A 最短路
    Uva 12169 不爽的裁判 模运算
    Uva 11582 巨大的斐波那契数 模运算
    Uva 10791 最小公倍数的最小和 唯一分解定理
    Uva 10375 选择与除法 唯一分解定理
    poj 3485 区间选点
    第二届团体程序设计天梯赛
    Uva 12657 双向链表
  • 原文地址:https://www.cnblogs.com/xumBlog/p/10112158.html
Copyright © 2011-2022 走看看