Thymeleaf静态资源引入方式及公共页面代码抽取

Posted 2020-11-16 zxfei

静态资源引入

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>