zoukankan      html  css  js  c++  java
  • Thymeleaf 模板布局

    主要介绍模板的引入。及如何在不改变前端人员的 HTML 显示结果的情况下设计模板(通过属性配置动态时不显示的部分)。

    模板模块导入

    首先定义一个 /resources/templates/footer.html 文件:

    <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    	<body>
    		<div th:fragment="copy">
    			&copy; 2018 Copyright by Lusifer.
    		</div>
    	</body>
    </html>
    

    上面的代码定义了一个片段称为 copy,我们可以很容易地使用 th:include 或者 th:replace 属性包含在我们的主页上

    <body>
    ...
    <div th:include="footer :: copy"></div>
    </body>
    

    include 的表达式想当简洁。这里有三种写法:

    templatename::domselector 或者 templatename::[domselector] 引入模板页面中的某个模块
    templatename 引入模板页面
    ::domselector 或者 this::domselector 引入自身模板的模块
    

    上面所有的 templatename 和 domselector 的写法都支持表达式写法:

    <div th:include="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>
    

    不使用 th:fragment 来引用模块

        <div id="copy-section">
        &copy; 2018 Copyright by holyong.
        </div>
    

    我们可以用 CSS 的选择器写法来引入

    <body>
    ...
    <div th:include="footer :: #copy-section"></div>
    </body>
    

    th:include 和 th:replace 的区别

    th:include 和 th:replace 都可以引入模块,两者的区别在于:

    th:include:引入子模块的 children,依然保留父模块的 tag
    th:replace:引入子模块的所有,不保留父模块的 tag
    

    举个例子

    <footer th:fragment="copy">
    &copy; 2018 Copyright by holyong.
    </footer>
    

    引入界面

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

    显示结果

    <body>
    ...
    <div>
    &copy; 2018 Copyright by holyong.
    </div>
    <footer>
    &copy; 2018 Copyright by holyong.
    </footer>
    </body>
  • 相关阅读:
    点分治练习
    PKU-2723 Get Luffy Out(2-SAT+二分)
    tarjan求割点与割边
    tarjan缩点练习 洛谷P3387 【模板】缩点+poj 2186 Popular Cows
    数算日子荣耀神
    《JavaScript DOM编程艺术》笔记
    CSS链接的样式a:link,a:visited,a:hover,a:active
    chrome调试技巧--持续更新
    CSS文字大小单位PX、EM的区别
    【转】如何成为一名优秀的web前端工程师(前端攻城师)?
  • 原文地址:https://www.cnblogs.com/holyong/p/11806617.html
Copyright © 2011-2022 走看看