初學SpringBoot,寫項目的時候遇到了問題,原本的頁面是這樣的
但啟動項目后是這樣的
這是因為thymeleaf中引入靜態資源及模板需要使用到 th:xxx 屬性,否則無法在動態資源中訪問靜態資源。
記錄一下解決方案。
訪問css
需要用到 th:href 來引入css資源,格式為 th:href = “@{文件路徑}”
如
<link rel="stylesheet" href="css/jquery-ui.min.css" th:href="@{/css/jquery-ui.min.css}" />
訪問js
需要用到 th:src 來引入js資源,格式為 th:src = “@{文件路徑}”
如
<script src="js/jquery.js" th:src="@{/js/jquery.js}"></script>
這里如果項目結構是這樣:
那么寫法上不需要像靜態頁面那樣引入
include頁面
當要把頁面拆分為模板,使用include方式(html中為jquary.load方式)引入時,需要使用
th:include=“要引入的html文件名::html中th:fragment屬性中的值”
<div id="pageTop" >
<header class="am-topbar am-topbar-inverse" th:include="topbar::topbarNav"></header>
</div>
<div class="super-bar">
<div id="pageLeft" >
<div class="left-sidebar" th:include="leftsider::leftSiderNav"></div>
</div>
<div id="pageMain" >
<div class="main-content" th:include="maincontent::mainContentNav"></div>
</div>
</div>
如th:include=“topbar::topbarNav”,即引用了topbar.html頁面的某個標簽
注意!!!如上圖,topbar.html使用了th:fragment標簽引入到index.html頁面后,它的class屬性不會隨着過去(但它的子元素的不會受到影響),需要在index所引用的位置添加相應的class