Spring-Boot Thymeleaf 模板嵌套布局

母版负责页面主框架,包括导航栏,侧边栏,footer等内容,还有公共css,js的引用.

子页负责页面content部分的内容,还可以单独引用css,js

例子如下:

母版  /templates/admin/dashboard

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <!-- 母版head begin -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>layout 母版</title>
母版title会被子页覆盖
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" /> <!-- 母版head end -->
   子页head信息会按顺序出现在这里 </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" > <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> </ul> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="#">MenuList</a></li> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> </ul> </div>
      
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" layout:fragment="content" 子页定义的东西会被追加到母版容器div上,本例中子页定义了style会加到这>         母版页这里可以放些示例内容,反正也会被子页覆盖,这里省略了 </div> </div> <div class="row"> <div th:replace="footer :: copy"></div> </div> </div> <script th:src="@{/js/jquery-1.12.4.min.js}"></script> <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script> <th:block layout:fragment="bottomscriptblock">这里是预留给子页单独引用js用的,th:block Thymeleaf不会渲染,放代码块最合适
    th:block is a mere attribute container that allows template developers to specify whichever attributes they want.
    Thymeleaf will execute these attributes and then simply make the block dissapear without a trace.
  </
th:block>
</body> </html>

 子页 /templates/admin/dict

 如下:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    layout:decorator="admin/dashboard">
    <!-- layout母版页文件路径-->

<head>
    <!-- 
    子页head,会排在母版页的后面
    <meta charset="utf-8" />    
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    -->
    <title>子页title</title>
</head>
<body>
<div layout:fragment="content" style="width:90%;">子页这里定义的东西会被添加到母版的div标签上 <div> 子页内容 </div> </div> <th:block layout:fragment="bottomscriptblock"> <script th:src="@{/js/holder.min.js}"></script> </th:block>

</body> </html>

 

子页的head内信息会按顺序出现在母版head信息之后,<title>比较特殊,子页会覆盖母版的<title>

子页单独需要引用的js,放到底部th:block块内部.

posted @ 2017-10-26 15:19  烙饼卷馒头  Views(4399)  Comments(1Edit  收藏  举报