當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
Spring Boot关于thymeleaf公共页面抽取
生活随笔
收集整理的這篇文章主要介紹了
Spring Boot关于thymeleaf公共页面抽取
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
?
理論
演示及源碼
?
理論
三種引入公共片段的th屬性：
? ? ? ? ? 1.??th:insert：將公共片段整個插入到聲明引入的元素中；
? ? ? ? ? 2.? th:replace：將聲明引入的元素替換為公共片段；
? ? ? ? ? 3.??th:include：將被引入的片段的內容包含進這個標簽中；
?
演示及源碼
第一個index界面：
第二個test1.html界面
第三個test2.html界面
?
程序項目結構如下：
源碼如下：
MyMvcConfig.java
package thymleaftest.demo.config;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;@Configuration public class MyMvcConfig {@Beanpublic WebMvcConfigurerAdapter webMvcConfigurerAdapter(){WebMvcConfigurerAdapter adapter = new WebMvcConfigurerAdapter() {@Overridepublic void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/").setViewName("index");registry.addViewController("/index.html").setViewName("index");registry.addViewController("/test1.html").setViewName("test1");registry.addViewController("/test2.html").setViewName("test2");}};return adapter;} }topNav.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>頂部導航</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"> </head> <body><nav class = "ui inverted attached segment m-padded-tb-mini m-shadow-small" th:fragment="topbar" id="topID"><div class = "ui container"><div class = "ui inverted secondary stackable menu"><img class = "ui Mini circular image" src ="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552617187&di=0caccea665bc6e7fdfb863a99b22448c&imgtype=jpg&er=1&src=http%3A%2F%2Fwx4.sinaimg.cn%2Fthumb150%2F0073Cjx6gy1fw1upwz4dlj306o06oq38.jpg"><h2 class = "ui teal header item">My Web</h2><a href="https://www.baidu.com" class="m-item item m-mobile-hide"><i class="mini computer icon"></i>點擊訪問我</a></div></div> </nav></body> </html>index.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>index界面</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"> </head> <body><div th:replace="~{commonality/topNav::topbar}"></div><h1>index界面</h1></body> </html>test1.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>test1界面</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"> </head> <body><div th:replace="~{commonality/topNav::#topID}"></div><h1>test1界面</h1></body> </html>test2.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>test2界面</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"> </head> <body><div th:insert="~{commonality/topNav::#topID}"></div><h1>test2界面</h1></body> </html>?
總結
以上是生活随笔為你收集整理的Spring Boot关于thymeleaf公共页面抽取的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java工作笔记-使用Maven创建Sp
- 下一篇： Qt工作笔记-对QThread使用的进一