當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
SpringBoot代码复用——thymeleaf提取导航栏并插入或替换元素
生活随笔
收集整理的這篇文章主要介紹了
SpringBoot代码复用——thymeleaf提取导航栏并插入或替换元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 創建通用文件commons
- 提取導航欄
- 1.找到導航欄所在代碼塊
- 2.把導航欄的前端代碼塊移入commons并命名
- 3.在各個有需求的html文件中使用導航欄組件
創建通用文件commons
注意：commons和所有要用thymeleaf的html文件都應該設置引用：
提取導航欄
1.找到導航欄所在代碼塊
<header class="app-header fixed-top">往往導航欄會以top、side、bottom命名。
2.把導航欄的前端代碼塊移入commons并命名
<header class="app-header fixed-top" th:fragment="topbar"> <div id="app-sidepanel" class="app-sidepanel" th:fragment="sidebar"> <div class="app-bottom " th:fragment="bottombar">th:fragment=""設置組件名稱
3.在各個有需求的html文件中使用導航欄組件
<div th:replace="~{/commons/commons::topbar}"></div><div th:replace="~{/commons/commons::sidebar}"></div>th:replace=""使用組件，格式為~{組件所在文件路徑::組件名}
總結
以上是生活随笔為你收集整理的SpringBoot代码复用——thymeleaf提取导航栏并插入或替换元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 虚拟专题：联邦学习 | 联邦学习隐私保护
- 下一篇： SpringBoot(Thymeleaf