1.layout.html檔案 產生布局
<!DOCTYPE html><html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"><head> <meta charset="utf-8" /> <title>首頁</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- bootstrap --> <link rel="stylesheet" href="../../static/bootstrap/3.3.5/css/bootstrap.min.css" th:href="@{/bootstrap/3.3.5/css/bootstrap.min.css}" /> <style type="text/css"> body{ font-family:微軟雅黑; font-size:14px; } </style> </head><body> <div th:fragment="topnav"> <nav class="navbar navbar-default" style="background: none repeat scroll 0 0 #394755;color:#fff;height:60px;"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header" style="margin-right:20%;"> <a class="navbar-brand" href="/mainframe" style="color:#fff;">測試&系統</a> </div> <!-- 退出 --> <a class="navbar-brand" href="#" style="color:#fff;float:right;" onclick="javascript:safeLogoutFun();">退出</a> <!-- 歡迎語 --> <div class="navbar-brand" style="margin-right:30px;font-size:15px;float:right;color:#f5d313;"> 歡迎您,<span th:text="${session.LoginUser.user_name}">親愛的使用者</span> 現在是 <span id="time"></span> <script th:inline="javascript"> /*<![CDATA[*/ function setTime(){ var dt=new Date(); var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var strWeek=arr_week[dt.getDay()]; var strHour=dt.getHours(); var strMinutes=dt.getMinutes(); var strSeconds=dt.getSeconds(); if (strMinutes<10) strMinutes="0"+strMinutes; if (strSeconds<10) strSeconds="0"+strSeconds; var strYear=dt.getFullYear()+"年"; var strMonth=(dt.getMonth()+1)+"月"; var strDay=dt.getDate()+"日"; var strTime=strHour+":"+strMinutes+":"+strSeconds; time.innerHTML=strYear+strMonth+strDay+" "+strTime+" "+strWeek; } setInterval("setTime()",1000); //20151013 安全退出 function safeLogoutFun(){ if(confirm("確定需要退出嗎。")){ $.ajax({ type: "POST", url: "safeLogout", dataType: "json", error:function(){ alert("退出失敗"); }, success: function(responseInfo) { // if(responseInfo.status == 0){ window.location.replace("index"); //window.event.returnValue = false;//取消預設事件的處理 } // if(responseInfo.status == 1){ alert("退出失敗"); } } });//end ajax }//end if confirm } /*]]>*/ </script> </div> </div> </nav> </div> <!-- 導航條 --> <div layout:fragment="content"></div> <!-- put the scripts below --> <script src="../../static/jquery/2.1.4/jquery-2.1.4.min.js" th:src="@{/jquery/2.1.4/jquery-2.1.4.min.js}"></script> <script src="../../static/bootstrap/3.3.5/js/bootstrap.min.js" th:src="@{/bootstrap/3.3.5/js/bootstrap.min.js}"></script></body></html>
2.之後頁面可套用此配置模式，重寫<div layout:fragment = "content">元素，css檔案和js檔案均可繼承
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="base/layout"> <!-- layout檔案路徑--><head> <meta charset="utf-8" /> <title>首頁</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /></head><body> <div layout:fragment="content" style="width:96%;margin-left:auto;margin-right:auto;"> <div style="font-size:18px;"> 測試thymeleaf layout布局 模式套用 js css 全部繼承自layout content 因頁面不同而不同 </div> <div style="margin:20px;"> </div> <div style="font-size:16px;margin:20px 0px;"> <a href="/tools/editTable1" target="_blank">可編輯表格外掛程式一測試</a> </div> <div style="font-size:16px;"> <a href="/tools/editTable2" target="_blank">可編輯表格外掛程式二測試</a> </div><script src="../../static/jquery/2.1.4/jquery-2.1.4.min.js" th:src="@{/jquery/2.1.4/jquery-2.1.4.min.js}"></script> <script src="../../static/bootstrap/3.3.5/js/bootstrap.min.js" th:src="@{/bootstrap/3.3.5/js/bootstrap.min.js}"></script><script src = "../../static/js/security/mainframe.js" th:src="@{/js/security/mainframe.js}"></script> </div> <!-- 編輯表格 --></body></html>
這裡若子頁面中單獨引入js檔案，如這裡的mainframe.js, 需將引用的其他js檔案全部寫到此js前面，即使是用到了layout.html中已經引用的jquery.js檔案，也需要將其重新再引入一遍，並且必須將js檔案寫進<div layout:fragment = "content"> 元素內，否則會出錯。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
