静态资源引入
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>
原文地址:https://www.cnblogs.com/zxfei/p/11600982.html
时间: 2024-10-09 15:40:19