Thymeleaf靜態資源引入方式及公共頁面代碼抽取

靜態資源引入

Thymeleaf模板引擎url問題，要用如下的方式寫，確保在任何情況下都能訪問到

<!-- Bootstrap core CSS -->
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引用webjars的方式引入靜態資源 -->
<link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}" rel="stylesheet">

<!-- 自定義樣式 -->
<link href="bootstrap/dist/signin.css" th:href="@{/bootstrap/dist/signin.css}" rel="stylesheet">

<!-- 圖片路徑 -->
<img class="mb-4" src="bootstrap/brand/bootstrap-solid.svg" th:src="@{/bootstrap/brand/bootstrap-solid.svg}" alt="" width="72" height="72">

公共頁面代碼抽取

抽取方式：將公共片段抽取到一個html文件中，加上相應的id

<!-- 1.公共導航欄抽取start -->
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow" th:frament="topbar" id="topbar">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">welcome，[[${session.loginUser}]]</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">

    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap"><a class="nav-link" href="#">注銷</a></li>
    </ul>
</nav><!-- 1.公共導航欄抽取end -->

在另一個頁面引用的方式為：通過id選擇器，Thymeleaf語法

<!-- 引入topbar -->
<div th:replace="commons/bar::#topbar"></div>