Thymeleaf static resources into the page code extracted and public way

The introduction of static resources

Thymeleaf url template engine problem, use the following way to write, to ensure that in any case be able to access

<!-- 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">

Public page code extracted

Skipping: the common segments to extract a html file, together with the corresponding 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 -->

In another way page references to: the id selector, Thymeleaf grammar

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

Guess you like

Origin www.cnblogs.com/zxfei/p/11600982.html