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页面的某个标签

thymeleaf爬坑:引入静态资源及模板页面

  • 注意!!!如上图,topbar.html使用了th:fragment标签引入到index.html页面后,它的class属性不会随着过去(但它的子元素的不会受到影响),需要在index所引用的位置添加相应的class

希望本文可以帮助到有需要的人,也欢迎各位大佬批评、提出建议。ヾ(๑❛▿◠๑)


源码地址:https://github.com/hxy1753911686/teachManager ,见其中的teachManager_springBoot

相关文章:

  • 2021-09-18
  • 2022-12-23
  • 2022-12-23
  • 2021-11-20
  • 2021-11-19
  • 2021-06-08
  • 2022-02-24
  • 2021-07-24
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-11-17
  • 2022-12-23
  • 2021-09-27
  • 2021-11-20
  • 2021-07-19
相关资源
相似解决方案